有没有办法异步加载iframe

leo*_*ora 41 iframe asynchronous

我有一个网页,iframe指向另一个网站.我不希望这阻止加载页面的其余部分.有没有办法异步加载它?

Ste*_*per 11

它不应该阻止.如果你想首先完全加载主页面(例如,iframe内容之前的主页面图像)那么你将不得不使用一些javascript来设置iframe的url,就像<body onload="javascript:...">

  • 在加载所有iframe之前,主文档的`onload`不会触发. (16认同)

Joh*_*ick 9

使用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>
Run Code Online (Sandbox Code Playgroud)

哪里url是一些URL.


Cox*_*oxy 5

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

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

</body>
<script  type='text/jscript' language='javascript'>
BodyOnready();
</script>
Run Code Online (Sandbox Code Playgroud)


gin*_*ime 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');
});
Run Code Online (Sandbox Code Playgroud)