在 iframe 中使用脚本标签无限加载答案

【问题标题】：Infinite loading with script tag inside iframe在 iframe 中使用脚本标签无限加载
【发布时间】：2016-07-05 13:27:06
【问题描述】：

这是代码，我遇到了过去 7 年从未遇到过的简单问题：

<html>
<body>
    <iframe></iframe>
    <script>
        window.frames[0].document.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
    </script>
</body>
</html>

问题是浏览器的转轮继续转。

网络控制台显示所有已加载。

如果我从 DOM 中删除 iframe，或添加/更改 @src 属性 - 加载停止。

【问题讨论】：

标签： javascript iframe

【解决方案1】：

我相信第一个答案是更好的方法，但我将提供与您的代码几乎相同的第二个答案，但显示调用 document.close() 也可以解决您的问题。

问题是您已开始写入 iFrame 中文档的 <head> 元素，但尚未完成（这就是页面不断加载的原因）。调用 document.close() 表示您已完成对文档的写入。

<html>
  <body>
    <iframe></iframe>
    <script>
      var doc = window.frames[0].document
      doc.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
      doc.close();
    </script>
  </body>
</html>

【讨论】：

为我节省了无数小时

【解决方案2】：

实际上，如果您可以控制内部脚本，我刚刚找到了可行的解决方案（尽管对加载 jQ 之类的第 3 方没有帮助）。

您应该使用document.close() 关闭“当前流”。

【讨论】：

【解决方案3】：

看起来 firefox 可能在 iframe 周围有些奇怪

<html>
  <body>
    <iframe></iframe>
    <script>setTimeout(function(){window.frames[0].document.write("hi");}, 5000);</script>
  </body>
</html>

这会导致微调器在页面加载后 5 秒启动并且不会消失（至少在我的计算机上 - firefox 47.0）

【讨论】：

【解决方案4】：

试试吧：

window.frames[0].document.write('<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/script>');

我检查了 JSbin，它工作正常。 Example page

更新：

我认为它不起作用，因为 iframe 甚至没有任何文档。它只是一个空标签，直到它有一个有效的src 并被填充。见demo

无论如何，这只有在 iframe 的内容在同一个域上时才有效（谷歌“跨域 iframe”）。这里正在进行一场“竞赛”。您想加载 jQuery，以便您正在加载的页面将使用它，但您无法将任何脚本从 iframe 外部加载到内部，直到页面加载到 iframe 内...

【讨论】：

是的，我知道，正如我在更新中所说，您尝试做的事情不应该完成（在加载之前）..

【解决方案5】：

通过在 Javascript 中定义和附加元素，我能够插入脚本而没有您描述的加载问题，没有任何加载问题。

<html>
  <body>
    <iframe id="myFrame"></iframe>
    <script>
      var jq = document.createElement('script')
      jq.type = 'text/javascript'
      jq.src = '//code.jquery.com/jquery-3.0.0.min.js'
      document.getElementById('myFrame').contentDocument.getElementsByTagName('body')[0].appendChild(jq);
    </script>
  </body>
</html>

当然，将body 更改为head 会改变脚本在 iFrame 中的加载位置。

【讨论】：

在我目前的情况下，我无法控制 document.write 的 iframe 插入代码。
但我明白了——如果没有使用document.write 的打开流，则不需要使用document.close 关闭它。
虽然我认为这是更好的方法，但我添加了另一个对您的情况有帮助的答案。