logo标签列表

异步加载iframe

iframeasynchronous
54

我有一个网页，其中包含指向另一个网站的<iframe>。 我不希望这个<iframe>阻止页面其余部分的加载。 有没有一种方法可以异步加载它？

你想要阻止哪种加载？异步是什么意思？ - Pekka
您的页面加载被阻止了吗？ - outis
8个回答
13

使用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。

12

它不应该阻塞。如果你希望先完全加载主页面（例如，在iframe内容之前加载主页面的图片），那么你需要使用一些JavaScript代码来设置iframe的url，例如<body onload="javascript:...">

23
只有当所有 iframe 都加载完成后，主文档的 onload 事件才会触发。 - Mrchief
1
你可以通过JavaScript在页面加载时动态创建iframe，并将其附加到文档中。 - Master Yoda
6

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

我们通过在主页面底部的脚本元素中调用所需方法来“模拟”OnLoad，即使在关闭body标签之外也可以实现：

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

我认为@Coxy是正确的，OnLoad不会触发。至少在运行一些网页性能测试时，它似乎正在等待iframe将页面视为完全加载。因此，我使用这个小的jQuery代码片段来加载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方法将不执行任何操作。 - Valerio Bozz
我也遇到了同样的问题—— Web 性能测试一直在等待 iframe。但是这个解决方案对我并没有起作用，我尝试更新 src 或者在加载后创建 iframe 的所有组合方式，但从 Chrome 加载动画中可以看出（就目前而言）它仍然在等待 iframe 被加载 :( 当然，如果我在控制台手动更新 iframe 的 src，它就可以正常工作！我不知道该将更新函数绑定在哪里以避免长时间的加载状态。 - Cameron Hyde
3
您可以等到“onload”触发后再设置iframe的src：
<body onload="loadFrame">

然后就像这样：
function loadFrame(){
    var myFrame = document.getElementById('myFrame');
    myFrame.src = "myURL";
};
太棒了，Google页面的得分提高了20分！ - user9158270
3

iframes应该自动异步加载，而无需您付出任何努力。

7
IFrame异步加载，但会阻塞window.onload事件。这里提供一些解释和解决方法。http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ - Cezary Daniel Nowak
3
一些原生JavaScript的替代方案：
HTML：
<iframe id="YOURID" src="about:blank">Loading...</iframe>

JS:

window.onload = function(){
  document.getElementById('YOURID').src = 'https://insertYourUrlHere.com'
};
1
没有 text/jscript 的 MIME 类型，你为什么认为有呢？如果你认为有的话，那么请先搜索一下并确保它存在。 - Iharob Al Asimi
2

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

  • 假设你的IFRAME看起来像这样：<iframe name="theOtherPage"></iframe>


$(document).ready(function(){
  (window.frames || document.frames)["theOtherPage"].window.location = "<a rel="nofollow noreferrer" href="http://theotherpage.com/">http://theotherpage.com/</a>"; 
});

这对我没有用。我在Firefox中进行了测试，但我怀疑这并不重要。 - CaptainBli
@CaptainBli，我已经更新了代码。我认为现在应该可以工作了。 - Joel A. Villarreal Bertoldi
2
不行。$(document).ready在DOMContentLoaded事件触发时运行，早于onload事件。在onload事件之前设置src仍然会阻塞onload事件。演示：https://codepen.io/mac9416/pen/qQLeyP - crenshaw-dev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接