JavaScript の iframe に onload イベントを実装する
- iFrame のロード時に JavaScript 関数を実行する
-
純粋な JavaScript を使用して
iframeのloadイベントに実装する -
onloadイベントリストナーを使用して、iframeのloadイベントに実装する -
iframeの HTML のonloadイベントハンドラーでインライン関数を使用する
<iframe> はインラインフレーム要素の略です。これらは、当社の Web サイトに他の Web ページをロードし、それらと対話するためのウィンドウです。iframe を使用して読み込まれたサイトまたはウェブページは、セッション履歴とキャッシュ値を維持し、親または呼び出し元のブラウザ画面に依存しません。iFrame コンテンツが読み込まれたら、関数を実行する必要がある場合があります。iframe コンテンツが読み込まれたら、JavaScript でメソッドを実行する方法を見てみましょう。
iFrame のロード時に JavaScript 関数を実行する
iframe HTML タグの onload イベントハンドラーを使用できます。iframe のすべての要素が読み込まれると、イベントが発生します。これらには、スクリプト、画像、リンク、サブフレームなどのロードが含まれます。これは、HTML タグで言及するパラメーターとして関数宣言を受け入れます。onload="siteLoaded()"は、テキストを Web ブラウザコンソールに記録する単純な JavaScript 関数である siteLoaded() 関数を実行します。次のコードを参照してください。
<iframe src="https://www.youtube.com/" onload="siteLoaded()"></iframe>
function siteLoaded() {
console.log('iframe content loaded');
}
出力：
iframe content loaded
純粋な JavaScript を使用して iframe の load イベントに実装する
iframe の読み込みが完了したら JavaScript 関数を実行する別の方法は、JavaScript の onload イベントハンドラーを使用することです。このために、目的の HTML 要素をクエリし、JavaScript 関数を HTML 要素の onload イベントハンドラーにアタッチします。これは、前のセクションで説明した方法と似ています。違いは、ここでは控えめな JavaScript と呼ばれる純粋な JavaScript アプローチを使用していることです。HTML は無駄のないクリーンな状態に保たれています。理解を深めるために、次のコードを見てみましょう。
<iframe src="https://www.youtube.com/"></iframe>
document.querySelector('iframe').addEventListener('load', function() {
console.log('iframe content loaded');
});
出力：
iframe content loaded
このコードを実行すると、JavaScript が null オブジェクトにリスナーを追加できないというエラーが発生する可能性があります。そのためには、window.onload メソッド内でコードをラップする必要があります。次のコードスニペットを参照してください。
window.onload = function() {
document.querySelector('iframe').addEventListener('load', function() {
console.log('iframe content loaded');
});
}
JavaScript は、window のすべての要素をロードすると、window.onload 関数を実行します。JavaScript の addEventListener() 関数は、イベントリスナーを HTML オブジェクトにリンクします。まず、イベントリスナーを追加する HTML オブジェクトを選択する必要があります。document.querySelector() は HTML オブジェクトを返します。このオブジェクトに、addEventListener() 関数を使用してロードイベントリスナーをアタッチします。addEventListener() は、iframe 要素が読み込まれるとトリガーされる関数（ここではインライン関数）をアタッチします。addEventListener() 関数を使用して、HTML 要素にさまざまなイベントを追加できます。ただし、説明の範囲では、load イベントに焦点を当てます。同様に、クリックイベントを HTML オブジェクトに追加することもできます。
onload イベントリストナーを使用して、iframe の load イベントに実装する
.addEventListener() と同様に、onload イベントにも参加できます。ここでも、document.getElementById() や document.querySelector() などの関数を使用して iframe 要素を選択します。要素を選択したら、JavaScript 関数をその要素にアタッチします。また、いくつかの方法で行うことができます。1つの方法は、関数をインラインで渡すことです。また、() を使用せずに関数オブジェクトをアタッチする方法もあります。() を使用すると、JavaScript は最初の実行インスタンス自体で関数を実行します。JavaScript では、より一般的な .addEventListener() とは異なり、onload をその目的のみに使用します。onload 関数の使用法を理解するには、次のコードを参照してください。
<iframe id="my_iframe" src="https://www.youtube.com/"></iframe>
window.onload = function() {
document.getElementById('my_iframe').onload = function() {
console.log('iframe content loaded');
};
}
JavaScript が要素をクエリできることを確認するために、document.getElementById('my_iframe').onload コードセクションを window.onload 内にカプセル化します。window.onload は、すべての要素がロードされ、document.getElementById('my_iframe') がそれらをフェッチできるようにします。要素が照会されたら、HTML オブジェクトの onload イベントハンドラーを使用して要素に関数をアタッチします。
iframe の HTML の onload イベントハンドラーでインライン関数を使用する
load イベントで関数を実行する別の方法は、HTML にインラインメソッドをアタッチすることです。これは、ロードイベントに JavaScript 関数を実装するための推奨される方法ではありませんが、緊急に必要な場合のハックとして役立ちます。このアプローチでは、HTML の iframe 要素の onload 関数属性でメソッドをインラインで渡します。iframe の準備が整うと、JavaScript は関数を実行します。使用法を理解するには、次のコードを参照してください。
<iframe src="https://www.youtube.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>
出力：
iFrame Loaded
onload イベントハンドラーで関数呼び出しを記述する方法を観察してください。インライン関数呼び出しは () で囲まれています。そして、インライン関数呼び出しの後に () があります。これは、div の onclick イベントに関数宣言を添付するのと似ています。