web-dev-qa-db-ja.com

要素が読み込まれているかどうかを確認する

私はサイトとそのサイト内のiFrame、および他の多くのコンテンツ（画像など）を持っています。

現在、jQueryの$(document).ready(function() { ... });を使用してコードを実行しています。そのコードでは、iFrameのコンテンツを操作しようとしています。ただし、コードを実行するにはiFrameが読み込まれていることを確認する必要があります。

IFrameは通常、コードの実行と同時に正確に読み込まれるため、失敗する場合とそうでない場合があります。

$('#iframe').load(function(){ });を使用すると、イベントが常に実行されるとは限りません。その時点でそのロードリスナーをアタッチすると、iFrameが既にロードを完了している可能性があり、ロードイベントが再度実行されないためです。離れると、要素がまだそこにない場合があります（コードの実行が早すぎます）。

だから私が達成したいのはそのようなものです：

if iFrame is already loaded
  -- execute code 
else 
  -- $('#iframe').load(function() { /*execute code*/ });

ダーティタイムアウトを使用せずにこれを実現するより良い方法はありますか？または、このアプローチを使用している場合、要素がすでにロードされているかどうかをチェックする関数はありますか？

jqueryeventsdomloading
3
Florian Müller

IFrameのsrcが設定される前に、$('#iframe').load(function(){ });が実行されていることを確認してください。

これを実現するには、HTMLではなくJavaScriptからsrcを設定します。

また、ここでは読み込み順序が重要です。 jQueryの全体的なラッパーがjQuery(window).load(function() {...})である場合、動作はjQuery(function() {...})によって提供されるものとは異なります。

3
Roamer-1888

同じドメインiframeの場合（ここではあなたのケースのようです）：

Iframeにコンテンツがあるかどうかを確認し、次のロジックを使用してロードイベントをトリガーできます。

$('#iframe').one('load', function(){
  console.log("Sure load event is called!")
}).each(function(){
  if(this.contentDocument.body.children.length) {
    $(this).trigger('load');
  }
})

クロスドメインiframeも処理する場合：

あなたの最善の策は、IE8をサポートする必要がない場合は、おそらくloadイベントをキャプチャし、DOMでiframeを設定する前に、たとえばhead セクション：

document.addEventListener(
    'load',
    function(event){
        var Elm = event.target;
        if( Elm.id === 'iframe'){ // or any other filtering condition
            console.log("Sure iframe is loaded!")
        }
    },
    true // Capture event
);
1
A. Wolff

DOMは常に、ページが完全に読み込まれる前に準備が整います。通常、.ready（）ハンドラーの実行中に実行されるコードにloadイベントリスナーをアタッチするのは安全ではありません。たとえば、ページが$ .getScript（）などのメソッドを使用してロードされた後、スクリプトを動的にロードできます。 .ready（）によって追加されたハンドラーは常に動的に読み込まれるスクリプトで実行されますが、ウィンドウの読み込みイベントは既に発生しており、これらのリスナーは実行されません。

jQueryは、DOMの準備ができたときに実行される関数をアタッチするいくつかの方法を提供します。次の構文はすべて同等です。

  • $（ハンドラ）
  • $（document）.ready（handler）
  • $（ "ドキュメント"）.ready（ハンドラ）
  • $（ "img"）.ready（ハンドラー）
  • $（）。ready（ハンドラー）

load（）ドキュメント 、 read（）ドキュメント

1
Eric Farias