Question

情况：我需要以动态异步方式在页面中创建iframe，如aaron peters在Iframe loading techniques and performance博客文章中所述，我多次阅读博客帖子甚至观看过在速度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>

必须有一些我遗漏的东西，你的回复表示赞赏。

显示动态Asynch Iframe的解决方案，显示页面而非脚本：

http://jsfiddle.net/LMB7h/希望它对某人有帮助，不要忘记用你自己的网址交换nytimes.com。

Answer 1

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

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

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

动态Asynch Iframe技术

显示动态Asynch Iframe的解决方案，显示页面而非脚本：

1 个答案: