2023年08月1日(火)
iframeの子ページが更新されるたびに処理を実行させる方法（クロスドメイン対応）
あまり使う機会が多くはないiframeですが、YouTubeやGoogleフォームなど外部サービスをページに埋め込む際にいまだに使われることがあります。
外部サービスふくめてiframeを組み込む際に、親ページから子ページの操作または逆のパターンを操作が必要になる場面はよくあるのですが、JavaScriptで処理をしようとするとわりと手間が掛かったり、親ページと子ページの関係がクロスドメインだと一切操作ができなかったりと、なかなか面倒だったりします。
そんなiframeの親ページから子ページの操作において、外部サービスをページ内に埋め込む際に、子ページ内でページが切り替わったことを判別して処理を実行させることが必要になったことがあり、クロスドメインでも動作させる方法があったので備忘録として紹介してみます。
iframeの子ページが更新されるたびに処理を実行
ページ内のiframeの子ページが更新されるたびに処理を実行させるにはJavaScriptの「addEventListener()」イベントを使用します。
document.querySelector('iframe').addEventListener('load', function() { // 子ページの読み込みが完了した後に実行される処理...
0
2
1
2author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
HELLO CYCLING、ドコモ・バイクシェア、チャリチャリ、LUUP、PiPPA。現役デザイナーがアプリデザインを徹底議論。ストレスを感じさせないUIとは？
NEXT ›
「配色アイデア手帖 第2版」発売記念のKindleセールがすごい！ SBクリエイティブのデザイン・イラスト関連の良書が最安値で、お買い得です
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『iframeの子ページが更新されるたびに処理を実行させる方法（クロスドメイン対応）』についてまとめています。
この記事は特にjavascript・Google・youtube・ドメイン・Webサービスについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
