ホームページ >ウェブフロントエンド >htmlチュートリアル >iframe リスニング イベントとは何ですか?

iframe リスニング イベントとは何ですか?

DDD
DDDオリジナル
2023-08-28 13:49:483188ブラウズ

iframe リスニング イベントには、onload イベント、onunload イベント、onbeforeunload イベント、onmessage イベント、onerror イベントなどが含まれます。詳細な説明: 1. iframe 内のコンテンツがロードされるときにトリガーされる onload イベントを追加します。 2. iframe 内のコンテンツがアンロードされるときにトリガーされる onunload イベントを追加します。 3. onbeforeunload イベントを追加します。 iframe 内のコンテンツがアンロードされる前にトリガーされるなど。

iframe リスニング イベントとは何ですか?

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

iframe は、他の Web ページまたはドキュメントを Web ページに埋め込むことができる HTML のタグです。 iframe を使用すると、他の Web ページやドキュメントを現在のページに埋め込むことができ、それによってページのネストとインタラクションを実現できます。

iframe を使用すると、さまざまなイベントをリッスンすることで iframe を制御し、対話することができます。一般的な iframe イベントの一部を次に示します:

1. onload イベント: iframe 内のコンテンツが読み込まれるときにトリガーされます。このイベントをリッスンするには、iframe タグに onload 属性を追加します。例:

<iframe src="example.html" onload="iframeLoaded()"></iframe>

上記のコードでは、iframe 内のコンテンツがロードされると、iframeLoaded という名前の関数が呼び出されます。

2. onunload イベント: iframe 内のコンテンツがアンロードされるときにトリガーされます。このイベントをリッスンするには、onunload 属性を iframe タグに追加します。例:

<iframe src="example.html" onunload="iframeUnloaded()"></iframe>

上記のコードでは、iframe 内のコンテンツがアンロードされると、iframeUnloaded という名前の関数が呼び出されます。

3. onbeforeunload イベント: iframe 内のコンテンツがアンロードされる前にトリガーされます。 onbeforeunload 属性を iframe タグに追加することで、このイベントをリッスンできます。例:

<iframe src="example.html" onbeforeunload="iframeBeforeUnload()"></iframe>

上記のコードでは、iframe 内のコンテンツがアンロードされる直前に、iframeBeforeUnload という名前の関数が呼び出されます。 。

4. onmessage イベント: iframe 内のコンテンツが親ページにメッセージを送信するとトリガーされます。このイベントは、親ページで window.addEventListener メソッドを使用してリッスンできます。例:

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  // 处理接收到的消息
}

上記のコードでは、iframe 内のコンテンツが親ページにメッセージを送信するときに、 acceptMessage が呼び出され、受信したメッセージを処理します。

5. onerror イベント: iframe 内のコンテンツの読み込みに失敗したときにトリガーされます。このイベントをリッスンするには、iframe タグに onerror 属性を追加します。例:

<iframe src="example.html" onerror="iframeError()"></iframe>

上記のコードでは、iframe 内のコンテンツの読み込みに失敗すると、iframeError という名前の関数が呼び出されます。

これらのイベントをリッスンすることで、iframe のロード、アンロード、メッセージングなどを制御および対話できるため、より豊かな Web ページ機能とユーザー エクスペリエンスを実現できます。

以上がiframe リスニング イベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。