Question

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

Answer 1

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

Answer 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是某个网址。

Answer 3

我认为@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');
});

Answer 4

iframe应该异步加载而不需要您付出任何努力。

Answer 5

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

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

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

Answer 6

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

假设您的IFRAME如下：<iframe name="theOtherPage"></iframe>


$(document).ready(function(){
  (window.frames || document.frames)["theOtherPage"].window.location = "http://theotherpage.com/"; 
});

Answer 7

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

<body onload="loadFrame">

然后是这样的：

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

Answer 8

一些香草JS替代方案：

HTML：

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

JS：

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

有没有办法异步加载iframe

8 个答案: