2つのiframe間でデータをどうやって送信しますか?

2つのiframe間でデータを転送する方法はいくつかあります。

  1. postMessageメソッドを使用すると、異なるiframe間で安全にデータを送信できます。ひとつのiframeはpostMessageメソッドを使用してデータを別のiframeに送信し、その後、別のiframeはデータを受信することができます。以下のコードを使用して、iframe Aからiframe Bにデータを送信できます:
  2. 「iframe A」から「iframe B」にデータを送信する
    var targetIframe = document.getElementById(‘iframeB’);
    targetIframe.contentWindow.postMessage(‘Hello from iframe A!’, ‘*’);
  3. iframe Bにデータをリッスンして受信する。
  4. iframe Bでデータを受信するためにイベントを監視しています。メッセージの送信元を検証しています。console.logを使用して、iframe Aからデータを受信しました。
  5. メッセージを受信するiframeでは、event.dataを使用して送信されたデータを取得することができます。
  6. localStorageの利用:localStorageはブラウザが提供するデータ保存メカニズムであり、異なるiframe間でデータを共有することができます。1つのiframeはlocalStorageにデータを保存し、別のiframeでそのデータを読むことができます。以下のコードを使用して、iframe Aでデータを保存することができます。
  7. // iframe Aにデータを保存する
    localStorage.setItem(‘data’, ‘iframe Aからこんにちは!’);
  8. その後、iframe Bでそのデータを読み込む。
  9. // iframe Bからデータを取得する
    var data = localStorage.getItem(‘data’);
    console.log(‘iframe Aからデータを受け取りました:’, data);
  10. localStorageを使用する際には、データの安全性と適切なクリーンアップメカニズムに注意する必要があります。
  11. 同じドメインからの2つのiframeを使用する場合、window.parentオブジェクトを使用して親ウィンドウのグローバル変数やメソッドに直接アクセスできます。 1つのiframeはwindow.parentオブジェクトを使用して親ウィンドウの変数を設定し、そして別のiframeはこれらの変数を直接読むことができます。 ただし、この方法は2つのiframeが同じドメインからである必要があります。
  12. iframe A内で親ウィンドウの変数を設定する。
  13. // iframe A内で親ウィンドウの変数を設定する
    window.parent.myData = ‘iframe Aからこんにちは!’;
  14. その変数をiframe Bで読み込む。
  15. // iframe Bで親ウィンドウの変数を読み取る
    var data = window.parent.myData;
    console.log(‘iframe Aからデータを受信しました: ‘, data);
  16. この方法は同一オリジンのiframe間にのみ適用され、グローバル変数の名前の衝突問題を引き起こす可能性がありますので、ご注意ください。

これらの方法は、実際の状況に応じて適切なデータ伝達方法を選択することができます。

bannerAds