есть ли способ загрузить iframe асинхронно

У меня есть страница с iframe, указывающий на другой сайт. Я не хочу, чтобы это заблокировать загрузку остальной части страницы. есть ли способ загрузить его asyncrounously?

36
asynchronous iframe

8 ответов

Он не должен блокировать. Если вы хотите, чтобы главная страница сначала полностью загрузилась (например, изображения главной страницы перед содержимым iframe), вам придется использовать немного javascript для установки url-адреса iframe, например <body onload="javascript:...">

11

используя 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.

8

Я думаю, что @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');
});
4

iframes должны загружаться асинхронно без каких-либо усилий с вашей стороны.

3

одна из проблем заключалась в том, что, хотя iframes уже загружаются асинхронно, главная страница не будет запускать OnLoad, пока iframe не закончит загрузку.

мы работали вокруг этого, "подделывая" OnLoad, вызывая метод, который мы хотели в элементе скрипта в нижней части главной страницы, даже вне закрывающего тега body:

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

хотя я согласен, что этого не должно происходить, вы можете подождать, пока ваша веб-страница будет полностью загружена, а затем загрузить содержимое iframe. С jQuery, я думаю, вы можете сделать что-то вроде этого:

  • предположим, что ваш IFRAME выглядит так:<iframe name="theOtherPage"></iframe> 


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

вы можете подождать, пока "onload" не сработает, чтобы установить src iframe:

<body onload="loadFrame">

затем что-то вроде этого:

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

некоторые альтернативы vanilla JS:

HTML-код:

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

JS:

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