iframe の読み込みが完了したかどうかを確認する方法

iframe の読み込みが完了したかどうかを確認する方法: コード例

Web 開発では、外部ページまたは他の Web ページを読み込む必要がある場合、多くの場合、iframe タグが使用済み。ただし、場合によっては、iframe のロード後に、iframe 内のコンテンツの取得や JavaScript コードの実行など、いくつかの操作を実行する必要があります。したがって、iframe が読み込まれているかどうかを判断することは非常に重要な作業です。

以下では、iframe が読み込まれているかどうかを確認するためのいくつかの方法を共有し、具体的なコード例を示します。

1. iframe の onload イベントを使用する
   iframe タグは、iframe 内のコンテンツが読み込まれるときにトリガーされる onload イベントを提供します。ページに非表示の iframe を埋め込み、その onload イベントをリッスンすることで、iframe が読み込まれているかどうかを判断できます。

HTML コード:

<iframe id="myIframe" src="external.html" style="display:none;"></iframe>

JavaScript コード:

var iframe = document.getElementById("myIframe");
iframe.onload = function() {
  // iframe加载完成后执行的操作
  console.log("iframe加载完成");
};

2. iframe の contentWindow 属性を使用する
   iframe の contentWindow 属性を通じて、次のことができます。 get 埋め込まれたページのウィンドウ オブジェクト。このオブジェクトを使用すると、iframe 内のドキュメントが読み込まれたかどうかを判断できます。

HTML コード:

<iframe id="myIframe" src="external.html"></iframe>

JavaScript コード:

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

var checkIframeLoaded = function() {
  if (iframe && iframe.contentDocument.readyState === 'complete') {
    // iframe加载完成后执行的操作
    console.log("iframe加载完成");
  } else {
    // 等待iframe加载完成
    setTimeout(checkIframeLoaded, 100);
  }
};

checkIframeLoaded();

3. jQuery の準備が整ったメソッドを使用する
   jQuery ライブラリがプロジェクトで使用されている場合は、 iframe がロードされているかどうかを判断するための Ready メソッドを提供します。

HTML コード:

<iframe id="myIframe" src="external.html"></iframe>

JavaScript コード:

$(document).ready(function() {
  $('#myIframe').on('load', function() {
    // iframe加载完成后执行的操作
    console.log('iframe加载完成');
  });
});

上記は、iframe の読み込みが完了したかどうかを判断するためのいくつかの方法とコード例です。実際の状況に応じて適切な方法を選択して、iframe 読み込み完了イベントを監視および処理します。この記事がiframeが読み込まれているかどうかを判断する際の参考になれば幸いです！

以上がiframe の読み込みが完了したかどうかを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。