异步加载 iframe答案

【问题标题】：Load an iframe asynchronously异步加载 iframe
【发布时间】：2010-01-22 01:04:03
【问题描述】：

我有一个带有<iframe> 指向另一个网站的网页。我不希望这阻止页面其余部分的加载。有没有办法异步加载它？

【问题讨论】：

您要阻止哪个加载？异步是什么意思？
您是否遇到了页面加载被阻止的问题？

标签： iframe asynchronous

【解决方案1】：

它不应该阻塞。如果您希望主页首先完全加载（例如，主页的图像在 iframe 内容之前），那么您必须使用一些 javascript 来设置 iframe 的 url，例如 <body onload="javascript:...">

【讨论】：

主文档的 onload 在所有 iframe 加载完成之前不会触发。
您可以在页面加载时通过 javascript 动态创建 iframe 并将其附加到文档中

【解决方案2】：

使用 jQuery，这有效：

<script type="text/javascript">
  $(window).load(function() {
    var f = document.createElement('iframe');
    f.src = url; 
    f.width = 1000; 
    f.height = 500;
    $('body').append(f);
  });
</script>

url 是某个 URL。

【讨论】：

【解决方案3】：

我们遇到的一个问题是，虽然 iframe 已经异步加载，但在 iframe 也完成加载之前，主页不会触发 OnLoad。

我们通过在主页底部的脚本元素中调用我们想要的方法来“伪造”OnLoad 来解决这个问题，甚至在结束正文标记之外：

</body>
<script  type='text/jscript' language='javascript'>
BodyOnready();
</script>

【讨论】：

【解决方案4】：

我认为@Coxy 是正确的，OnLoad 不会触发。至少在运行一些网页性能测试时，在我看来它正在等待 iframe 考虑页面已完全加载。因此，我使用这个小的 jQuery sn-p 来加载 iframe：

HTML： <iframe id="blabla"></iframe>

JS：

$(window).load(function() {
   if ($('#blabla').length <= 0) { return; }  // to avoid errors in case the element doesn't exist on the page / removed.
   $('#blabla').attr('src','//example.com/page');
});

【讨论】：

使用任何版本的 jQuery 都不需要检查$('#blabla').length。如果选择器为空，.attr 将执行任何操作。

【解决方案5】：

您可以等到“onload”触发后设置 iframe 的 src：

<body onload="loadFrame">

然后是这样的：

function loadFrame(){
    var myFrame = document.getElementById('myFrame');
    myFrame.src = "myURL";
};

【讨论】：

很棒，谷歌页面洞察得分提高了 20！

【解决方案6】：

iframe 应该异步加载，您无需付出任何努力。

【讨论】：

Iframes 异步加载但会阻止 window.onload 事件。这是一些解释和解决方法lognormal.com/blog/2012/12/12/the-script-loader-pattern

【解决方案7】：

一些普通的 JS 替代品：

HTML：

<iframe id="YOURID" src="about:blank">Loading...</iframe>

JS：

window.onload = function(){
  document.getElementById('YOURID').src = 'https://insertYourUrlHere.com'
};

【讨论】：

没有text/jscript mime 类型，为什么你认为有？如果你认为有，那么首先谷歌它并确定。

【解决方案8】：

虽然我同意这不应该发生，但您可以等待网页完全加载，然后加载 iframe 内容。使用 jQuery，我认为您可以这样做：

假设您的 IFRAME 看起来像：<iframe name="theOtherPage"></iframe>


$(document).ready(function(){
  (window.frames || document.frames)["theOtherPage"].window.location = "@987654321@"; 
});

【讨论】：

这对我不起作用。我在 Firefox 中进行测试，但我怀疑这很重要。
@CaptainBli，我已经更新了代码。我认为现在应该可以了。
不。 $(document).ready 在加载之前在 DOMContentLoaded 上运行。在 onload 之前设置 src 意味着它仍然会阻止 onload。演示：codepen.io/mac9416/pen/qQLeyP