文章/答案/技术大牛

发布

社区首页 >问答首页 >在iframe中添加脚本标记，其内容由srcdoc设置。

问在iframe中添加脚本标记，其内容由srcdoc设置。
EN

Stack Overflow用户

提问于 2020-10-06 08:55:06

回答 1查看 1.1K关注 0票数 0

所以我想做的是这样的-让我说我有一个像这样的htmlString --

let htmlString = `<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
            <img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"/>
    <div id="root"></div>
    <script type="text/jsx">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>`

我想修改这个字符串并添加一个--另一个脚本标记作为-第一个脚本标记--以获得输出字符串为--

let htmlString = `<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="">console.log("Script Added at top")</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
            <img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"/>
    <div id="root"></div>
    <script type="text/jsx">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>`

我不知道head标签里面还有多少其他标签，所以不能简单地查找和替换

javascript

html

jquery

iframe

script-tag

回答 1

Stack Overflow用户

发布于 2020-10-06 09:06:15

穹顶操作可以工作，但您永远无法插入脚本作为执行的第一个脚本：

注意:这将不能在堆栈片段中工作-在您自己的服务器上尝试它。

const html = `<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"><\/script>
  </head>
  <body>
            <img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"/>
    <div id="root"></div>
    <script type="text/jsx">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    <\/script>
  </body>
</html>`
const script = document.createElement("script");
script.textContent = `console.log("Script Added at top")`;
const iframe = document.createElement("iframe");
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
const doc = iframe.contentWindow;
doc.querySelector("head").appendChild(script);

如果脚本是外部的，可以从/script中删除\

let html = `<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"><\/script>
  </head>
  <body>
            <img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"/>
    <div id="root"></div>
    <script type="text/jsx">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    <\/script>
  </body>
</html>`.split("\n")
html.splice(4,0,`    <script src="">console.log("Script Added at top")<\/script>`)
const htmlString = html.join("\n")
console.log(htmlString)

在任何脚本之前插入：

let htmlString = `<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"><\/script>
  </head>
  <body>
            <img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"/>
    <div id="root"></div>
    <script type="text/jsx">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    <\/script>
  </body>
</html>`
parts = htmlString.split("<script")
parts[0] += `    <script src="">console.log("Script Added at top")<\/script>\n     `;
htmlString = parts.join("<script")
console.log(htmlString)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64222454

复制

相似问题

问在iframe中添加脚本标记，其内容由srcdoc设置。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在iframe中添加脚本标记，其内容由srcdoc设置。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在iframe中添加脚本标记，其内容由srcdoc设置。
EN