TAGS :,

あまり使う機会が多くはないiframeですが、YouTubeやGoogleフォームなど外部サービスをページに埋め込む際にいまだに使われることがあります。

外部サービスふくめてiframeを組み込む際に、親ページから子ページの操作または逆のパターンを操作が必要になる場面はよくあるのですが、JavaScriptで処理をしようとするとわりと手間が掛かったり、親ページと子ページの関係がクロスドメインだと一切操作ができなかったりと、なかなか面倒だったりします。

そんなiframeの親ページから子ページの操作において、外部サービスをページ内に埋め込む際に、子ページ内でページが切り替わったことを判別して処理を実行させることが必要になったことがあり、クロスドメインでも動作させる方法があったので備忘録として紹介してみます。

iframeの子ページが更新するたびに処理を実行

iframeの子ページが更新または読み込まれるたびに処理を実行させるにはJavaScriptの「addEventListener()」イベントの「load」処理を使用します。

document.querySelector('iframe').addEventListener('load', function() {
  // 子ページの読み込みが完了した後に実行される処理
  console.log('Child page has been loaded.');
});

「querySelector()」メソッドでiframeを指定することで、ページ内に存在するすべてのiframeが対象になります。

この処理を使って、iframeの子ページが読み込まれるたびに、親ページのスクロール位置を最上部に戻す処理の動作例は以下になります。
※親ページをスクロールした後に子ページ内のリンクをクリックしてみてください。

See the Pen
iframe Load to Top [1] by BLACKFLAG (@BlackFlag)
on CodePen.

ページ内の特定のiframeの子ページが更新するたびに処理を実行

ページ内にiframeが複数あったような場合に、特定のiframeのみに処理する場合はidを使って処理します。
※iframeにid「#load-child」を付けた想定です。

document.getElementById('load-child').addEventListener('load', function() {
  // 子ページの読み込みが完了した後に実行される処理
  console.log('Child page has been loaded.');
});

「getElementById()」メソッドで特定のidを指定することでページ内の任意のiframeのみに処理を実行させることができます。

この処理を使って、idを判別してiframeの子ページが読み込まれるたびに、親ページのスクロール位置を最上部に戻す処理の動作例は以下になります。
※親ページをスクロールした後に子ページ内のリンクをクリックしてみてください。

See the Pen
iframe Load to Top [2] by BLACKFLAG (@BlackFlag)
on CodePen.

iframeタグに「onload()」イベントを付けて実行

もっとシンプルにiframeタグの属性に「onload()」イベントをつけて処理する方法もあります。

<iframe src="https://example.com" onload="childLoad()"></iframe>

// 子ページの読み込みが完了した後に実行される処理
function childLoad() {
  console.log('Child page has been loaded.');
};

iframeタグの属性に「onload()」イベントを付けて関数を実行させるようにするだけで、iframeの子ページが更新される度に「onload()」イベントを実行させることができます。

この「onload()」イベントを使って、iframeの子ページが読み込まれるたびに、親ページのスクロール位置を最上部に戻す処理の動作例は以下になります。
※親ページをスクロールした後に子ページ内のリンクをクリックしてみてください。

See the Pen
iframe Load to Top [3] by BLACKFLAG (@BlackFlag)
on CodePen.

使う場面が限定されるiframe処理ですが、クロスドメインでも動作するので外部サービスをページに組み込んで処理する際に覚えておくと便利になる時があるかと思います。

Googleフォームをiframeで埋め込む際に、入力項目が多く親ページをスクロールした状態で回答すると、入力完了画面がページ上部に表示されてしまいユーザーに気がつかれない状態になってしまうので、そのような時にこの処理で対応することができます。

iframeの子ページの更新を判別する際にぜひ。。。