ホームページ >ウェブフロントエンド >htmlチュートリアル >iframe リスニング イベントとは何ですか?
iframe リスニング イベントには、onload イベント、onunload イベント、onbeforeunload イベント、onmessage イベント、onerror イベントなどが含まれます。詳細な説明: 1. iframe 内のコンテンツがロードされるときにトリガーされる onload イベントを追加します。 2. iframe 内のコンテンツがアンロードされるときにトリガーされる onunload イベントを追加します。 3. onbeforeunload イベントを追加します。 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 サイトの他の関連記事を参照してください。