ホームページ > ウェブフロントエンド > htmlチュートリアル > iframe の読み込みが完了したかどうかを確認する方法

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

WBOY
リリース: 2024-02-22 11:33:03
オリジナル
929 人が閲覧しました

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加载完成");
};
ログイン後にコピー
  1. 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();
ログイン後にコピー
  1. 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート