iframe 子ページから親ページへの情報送信 - Javascript 深掘り解説
Web 開発において、iframe はある Web ページ内に別の Web ページを埋め込むために使用されます。 この記事では、Javascript を使用して iframe 子ページと親ページ間でデータを送受信する方法について詳しく解説し、 具体的なコード例と解説を提供することで、開発者がこの技術をより深く理解し、応用できるようにすることを目指します。
目次
1. iframe の概要と活用シーン
iframe 要素は、外部の Web ページを現在の Web ページに埋め込むために使用されます。 主な用途は以下のとおりです。
- サードパーティコンテンツの読み込み（広告、地図など）
- ページのモジュール化の実現
- クロスドメインデータのやり取り
2. 子ページから親ページへの情報送信の仕組み
同ドメインおよびクロスドメインの場合において、子ページから親ページの DOM にアクセスする方法には違いがあります。 `window.parent` オブジェクトを使用することで、子ページから親ページの Window オブジェクトにアクセスできます。 また、クロスドメイン通信では `postMessage` API を使用することで、安全かつ確実にデータを送受信できます。
3. Javascript コード実装
ここでは、子ページから親ページへデータを送信するための Javascript コード例を示します。
3.1 子ページコード
<script>
// 送信するデータ
const data = { message: "iframe からのメッセージです！" };
// 親ページへデータを送信
window.parent.postMessage(data, 'https://親ページのドメイン');
</script>
3.2 親ページコード
<script>
// message イベントを監視
window.addEventListener('message', (event) => {
// メッセージ送信元の検証
if (event.origin !== 'https://子ページのドメイン') return;
// 送信されたデータを取得
console.log('子ページからのメッセージ：', event.data);
});
</script>
4. セキュリティ上の問題と解決策
クロスドメイン通信ではセキュリティ上のリスクが存在します。 `postMessage` API を使用する場合は、メッセージ送信元の検証を厳密に行うことが重要です。 具体的には、`event.origin` プロパティで送信元のドメインを確認し、許可されたドメインからのメッセージのみを受け入れるようにします。
5. 実際の活用事例
iframe を使用した子ページと親ページ間のデータ送信は、以下のようなケースで活用できます。
- EC サイトのカート機能：商品情報を iframe で表示し、カートへの追加操作を親ページに伝える
- SNS プラットフォームのログインウィンドウ：iframe 内でログイン処理を行い、結果を親ページに通知
- オンラインドキュメントエディタ：編集内容をリアルタイムに親ページと同期
6. まとめ
この記事では、Javascript を使用して iframe 子ページから親ページへ情報を送信する方法、 セキュリティ上の考慮点、具体的なコード例、そして実際の活用事例について解説しました。 iframe を効果的に活用することで、より高度でインタラクティブな Web アプリケーションを構築することができます。
関連文献
Q&A
Q1: `postMessage` API は、どのような種類のデータを送信できますか？
A1: `postMessage` API は、文字列だけでなく、オブジェクト、配列などの構造化データも送信できます。ただし、送信前に JSON.stringify() などで文字列に変換する必要があります。
Q2: `postMessage` API を使用せずに、子ページから親ページの DOM を操作することはできますか？
A2: 同一ドメインであれば `window.parent` を使用して親ページの DOM にアクセスできます。しかし、クロスドメインの場合、セキュリティ上の制限により直接操作することはできません。`postMessage` API を使用して間接的に操作する必要があります。
Q3: iframe を使用せずに、ページ間でデータを送信する方法はありますか？
A3: はい、いくつか方法があります。例えば、LocalStorage を使用する方法や、サーバーサイドでデータをやり取りする方法などがあります。最適な方法は、具体的な要件によって異なります。
その他の参考記事:jquery iframe 親