is there a way to load an iframe asynchronously

2019-01-15 05:44发布

站内文章 / 后端开发
6 0 0

问题:

i have a webpage with an iframe pointing to another website. I dont want this to block the loading of the rest of the page. is there a way to load it asyncrounously?

回答1:

It shouldn't block. If you want the main page to fully load first (eg, main page's images before iframe content) then you'll have to use a bit of javascript to set the url of the iframe, like <body onload="javascript:...">



回答2:

Using jQuery, this works: 

<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>

where url is some URL.



回答3:

I think @Coxy is correct that the OnLoad won't fire. At least when running some web page performance tests it seemed to me it is waiting for the iframe to consider the page to be fully loaded. I therefore use this small jQuery snippet to load the 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');
});


回答4:

iframes should load asynchronously without any effort on your part.



回答5:

One problem we had was that while iframes already do load asynchronously, the main page will not fire OnLoad until the iframe has finished loading too.

We worked around this by 'faking' OnLoad by calling the method we wanted in a script element at the bottom of the main page, even outside the closing body tag:

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


回答6:

Although I agree this shouldn't be happening, you could wait for your webpage to be completely loaded, and then load the iframe contents. With jQuery, I think you can do something like this:

  • Supposing your IFRAME looks like: <iframe name="theOtherPage"></iframe>


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



回答7:

you can wait until after 'onload' has fired to set the iframe's src:

<body onload="loadFrame">

then something like this:

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


回答8:

Some vanilla JS alternative:

HTML:

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

JS:

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


标签： iframe asynchronous
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~