动态异步 iframe 技术答案

【问题标题】：Dynamic Asynch Iframe technique动态异步 iframe 技术
【发布时间】：2014-08-24 18:13:42
【问题描述】：

情况：我需要在页面内以动态异步的方式创建一个 iframe，如 aaron peters 的 Iframe loading techniques and performance 博文中所述，我多次阅读博文，甚至观看了原文在velocity conf 上进行的演示，Meebo 的工程师首次介绍了这种技术（如博客文章中所述）..

我不是 JS 专家，但代码对我来说似乎很直接。我认为他的演示页面也不能正常工作（Iframe 显示为空白）！并且该技术在网上并不流行，我希望这个问题的答案可以作为参考，人们可以复制粘贴代码并进行最少的修改，以创建具有该技术所提供的所有优点的 iframe。

简要说明：

该技术可防止 Iframe 阻塞在等待 Iframe 和 DOM 的其余部分首先完全加载时页面正在加载。
它可以防止浏览器的繁忙指示器工作加载所有内容需要多长时间，从而获得更好的用户体验。
使用这种技术，Iframe 开始加载其内容在主页面的加载触发（Iframe 开始加载较早 = 较早显示 = 更好的速度性能），所以请不要建议在加载触发时修改 iframe 的 src 或将 iframe 元素附加到 DOM 的方法的答案，如下所示：is there a way to load an iframe asynchronously

这是我的代码：（与博文中显示的几乎相同）。

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
<body>

  <script>
  (function(d){
    var iframe = d.body.appendChild(d.createElement('iframe')),
    doc = iframe.contentWindow.document;

    iframe.style.cssText = "width:500px;height:500px;"; // simple CSS

    doc.open().write('<body onload="' + 
    'var d = document;d.getElementsByTagName(\'head\')[0].' + 
    'appendChild(d.createElement(\'script\')).src' + 
    '=\'http:\/\/google.com\'">');

    doc.close(); //iframe onload event happens

    })(document);

  </script>
</body>
</html>

一定有我遗漏的东西，感谢您的回复。

显示动态异步 iframe 的解决方案，显示页面而不是脚本：

http://jsfiddle.net/LMB7h/希望对某人有所帮助，别忘了把 nytimes.com 换成你自己的 url。

【问题讨论】：

http://google.com 不返回脚本，当您将此 url 分配为 script-src 时，您期望什么？
我希望将它作为 iframe 链接回来（看到它出现，仅此而已，然后我可以使用我的意图页面进行操作），我将 google 放在那里作为占位符示例，我应该怎么做试试？
脚本不是 iframe，当您以这种方式加载脚本时，它将被评估，当资源不是脚本时，您得到的只是语法错误
不管怎样，我的目标是链接回一个 iframe 并在其中显示一个页面，并实现如上所述的加载，这不是吗？
我刚看到你的回答.. 有没有办法调整这个来显示一个页面？

标签： javascript iframe dynamic asynchronous

【解决方案1】：

基本上你只需要重定向到所需的网址：

doc.open().write('<body onload="location.href=\'http:\/\/google.com\'">');

这不适用于 google，因为 google 的 X-Frame-Options 不允许在框架中加载，但对于发送适当标题的页面，您应该得到所需的结果。

【讨论】：

谢谢，除了繁忙的指示器一直工作直到一切加载，iframe 执行后的脚本无需等待，所以它可以工作:)！您能否告诉我应该编辑脚本的哪一部分以使 iframe 显示代替 Html 布局中的现有 div（以某种方式将其附加到它）。非常感谢。
var iframe = d.getElementById('someId').appendChild(d.createElement('iframe')) ，其中 someId 是所需 <div> 的 id 属性