在内容由srcdoc设置的iframe中添加脚本标签

问题描述

所以我想做的是这样- 可以说我有一个像这样的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,document.getElementById('root')
      );
    </script>
  </body>
</html>`

我不知道head标签内还有多少其他标签，因此无法简单地查找并替换

解决方法

DOME操纵可行，但您永远无法将脚本作为要执行的第一个脚本插入：

注意：这在堆栈片段中不起作用-在您自己的服务器上尝试

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,document.getElementById('root')
      );
    <\/script>
  </body>
</html>`.split("\n")
html.splice(4,`    <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,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)

html iframe javascript script-tag

在内容由srcdoc设置的iframe中添加脚本标签

问题描述

解决方法

相关问答