JavaScript の iframe に onload イベントを実装する

1. iFrame のロード時に JavaScript 関数を実行する
2. 純粋な JavaScript を使用して iframe の load イベントに実装する
3. onload イベントリストナーを使用して、iframe の load イベントに実装する
4. 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 イベントに関数宣言を添付するのと似ています。