web-dev-qa-db-ja.com

iframeを非同期にロードする方法はありますか

別のWebサイトを指すiframeを持つWebページがあります。これがページの残りのロードをブロックすることを望みません。非同期にロードする方法はありますか？

iframeasynchronous
40
leora

ブロックしないでください。メインページを最初に完全にロードする場合（たとえば、iframeコンテンツの前のメインページの画像）、<body onload="javascript:...">

12
Steve Cooper

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です。

9
John Pick

OnLoadが起動しないのは@Coxyが正しいと思います。少なくともいくつかのWebページのパフォーマンステストを実行しているときは、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
gingerlime

iframeは、ユーザーの手間をかけずに非同期でロードする必要があります。

4
outis

私たちが抱えていた問題の1つは、iframeがすでに非同期でロードしている間に、iframeのロードが完了するまでメインページがOnLoadを起動しないことでした。

この問題を回避するには、メインページの下部にあるスクリプト要素で、閉じているbodyタグの外側でも、必要なメソッドを呼び出してOnLoadを「偽造」しました。

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

「onload」が発生してからiframeのsrcを設定するまで待つことができます。

<body onload="loadFrame">

次に、このようなもの：

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

これが起こるべきではないことに同意しますが、Webページが完全にロードされるのを待ってから、iframeコンテンツをロードすることができます。 jQueryを使用すると、次のようなことができると思います。

  • IFRAMEが次のようになっているとします：<iframe name="theOtherPage"></iframe>

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