BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5 postMessage使用マニュアル

2022-02-01 07:04:50

コーディングをしていると、次のようなクロスドメインのシナリオに遭遇することがよくあります。

1、ページ内にiframeをネストさせ、iframeのメッセージングを行う。

2、ページ間、複数ページ間のメッセージの受け渡し

これらの頭痛の種であるクロスドメインの問題に対して、html5は特別に新しい機能であるpostMessage（クロスドキュメントメッセージング）を導入しました。postMessageを使用するには、データとoriginUrlという二つのパラメータを渡す必要があります。データは渡されるコンテンツですが、一部のブラウザでは文字列パラメータのみを扱うことができるので、一般的にはデータを少しシリアライズ、すなわちJSON.stringify（）、およびoriginUrlはターゲットurl（指定したウィンドウ）に配置します。

ここでは、わかりやすく書きやすいと思う、ダンプする例を紹介します。

1. ページ内のネストしたiframe

親ページです。

htmlを使用します。 

<div id='parent'>hello word postMessage</div>
<iframe src="http://127.0.0.1:8082/index2.html" id='child'></iframe>

jsです。 

window.onload=function(){

    window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')

} 

window.addEventListener('message',function(e){

    console.log(e)

    document.getElementById('parent').style.color=e.data

})

サブページです。

htmlを使用します。 

<div id='button' onclick='changeColor();' style="color:yellow">Accept message</div>

jsです。 

window.addEventListener('message',function(e){

      console.log(e)

      let color = document.getElementById('button').style.color

      window.parent.postMessage(color,'http://127.0.0.1:8081/index.html')

});

function changeColor(){

      let buttonColor = document.getElementById('button').style.color

      buttonColor='#f00'           

      window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')

}

親ページは postMessage メソッドで iframe にメッセージを渡し、子ページは window.addEventListener で message メソッドをリッスンして親ページから渡された値を取得します。下図に示すように、dataは親ページから渡された値です。

子ページは親ページにメッセージを渡しますが、これも postMessage メソッドを介して行います。ただし window.parent.postMessage(data,url) と同じ方法ではありません。親ページは、同様にメッセージイベントをリッスンすることで値を取得します。

2. 複数ページ間でのメッセージの受け渡し

親ページです。

htmlを使用します。 

<div id='parent' onclick="postMessage()">hello word postMessage</div>

jsです。 

let parent = document.getElementById('parent')

function postMessage(){

    let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage')

    setTimeout(function(){

       windowOpen.postMessage('postMessageData','http://127.0.0.1:8082/index2.html')

  },1000) 

}

サブページです。

htmlを使用します。 

<div id='button' onclick='changeColor();' style="color:#f00">Accept message</div>

jsです。 

window.addEventListener('message',function(e){

      console.log(e)

 });

親ページは、window.open で別のページを開いて値を渡すことで、子ページにメッセージを渡します。postMessage を使う場合は、setTimeout を使ってメッセージの受け渡しを遅らせる必要があることに注意してください。なぜなら、子ページは一度に読み込まれないので、子ページのリスニングイベントはまだ始まっておらず、この時点では値を受け取ることはできないからです。

以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します