Question

我想加载 iframe ，除了从给定的URL加载JavaScript文件之外什么也不做。虽然通过将一个简单的HTML页面加载到iframe中只需包含＆lt; script＆gt; 标记来加载JavaScript文件就可以轻松实现，但这需要向服务器发出两个请求。

＆＃xA;＆＃xA;

所以我的想法是编写代码以将父文件中的调用方法中的JS文件加载到空的iframe中。

＆＃xA;＆＃xA; < p>这样的东西适用于所有浏览器：

＆＃xA;＆＃xA;

  function createScriptFrame（container，url）{＆＃xA; const frame = document.createElement（'iframe'）;＆＃xA; container.appendChild（帧）;＆＃XA; const doc = frame.contentDocument;＆＃xA; doc.open（）;＆＃XA; doc.write（'＆lt; html＆gt;＆lt; body＆gt;＆lt; script src =“'+ url +'”＆gt;＆lt; / script＆gt;＆lt; / body＆gt;＆lt; / html＆gt;'）;＆＃xA; doc.close（）;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

但是使用 document.write 真的很讨厌这样做的方式。 Chrome甚至在控制台发出警告时抱怨： [违规]避免使用document.write（）。

＆＃xA;＆＃xA;

我想出了一个几种替代方法，例如：

＆＃xA;＆＃xA;

  //与上述相同，直到doc.open（）＆＃xA; const s = doc.createElement（'script'） ）;＆＃xA; s.src = url;＆＃xA; doc.head.appendChild（s）;＆＃xA;

＆＃xA;＆＃xA;

或< / p>＆＃xA;＆＃xA;

  const s = doc.createElement（'script'）;＆＃xA; s.appendChild（doc.createTextNode（'（function（）{const s = ＆＃xA; document.createElement（“script”）; s.src =“'+ url +'”;＆＃xA; document.body.appendChild（s）;}）（）'））;＆＃xA; doc.head.appendChild（s）;＆＃xA;

＆＃xA;＆＃xA;

这些在Chrome和Safari中运行良好，但不在Firefox中 。

＆＃xA;＆＃xA;

我用几种方法编译了一个加载脚本的测试： https://embed.plnkr.co/l8DwUBQs7cQsi938eTOn/

＆＃xA;＆＃xA;

任何想法如何使这项工作？

＆＃ XA;

Answer 1

您可以创建一个blob并将其打开

var url = 'foo'
var blob = new Blob([
  '<html><body><script src="' + url + '"></script></body></html>'
], {type: 'text/html'})
var iframeUrl = URL.createObjectURL(blob)
console.log(iframeUrl)

...或者如果您喜欢base64网址

您也可以使用srcdoc，但IE / Edge不支持

Answer 2

您现在可以在 iframe 上使用新属性 document.write()，而不是 srcDoc。

https://caniuse.com/iframe-srcdoc

如何在没有document.write的情况下将<script>标记注入空iframe？

2 个答案: