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

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

Ответ 1

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

Ответ 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 - некоторый URL.

Ответ 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');
});

Ответ 4

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

Предположим, что ваш IFRAME выглядит следующим образом: <iframe name="theOtherPage"></iframe>


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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

<body onload="loadFrame">

то что-то вроде этого:

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

Ответ 8

некоторое простое решение JS с ванилью будет выглядеть так:

    <!-- .... -->
    <iframe id="YOURID" src="">Loading...</iframe>
    <!-- .... -->
</body>

<script  type='text/jscript' language='javascript'>
    document.getElementById('YOURID').src = 'https://insertYourUrlHere.com';
</script>