💁‍♂️

iframe内から親windowへ "postMessage"

2023/02/09に公開

JavaScript

はじめに

postMessageをここに書いておこうかと思います。
解釈が間違っているかもですが、その時はご指摘よろしくお願いいたします。

postMessageとは

簡単にいうとsessionStorageみたいなものだと印象を受けました。
子供から親、子から親に「〜してくれえ」と指示する的な、、、。VueでいうとProps、$emitの印象を受けました。
iframeを使うときとかにこれを使うらしいです。（ちなみに私も今回それです。）
iframeの中ではsessionStorageやlocalStrageが使えないので、この方法があるらしいです。

詳しくは下記URLを参照してみてください。
mdn（みんな大好き）

使いかた

例として、子windowの中のBTNを押したら、親windowの中の要素を消してみる。

childWindow

  //子windowのボタンを押したら、親windowにmessageを送る
  const btn = document.getElementById("btn");
  btn.addEventListener("click",() => {
    // 第二引数はorginを制限せずにすべてのorginからのメッセージを受け取ること意味している。
    window.parent.postMessage("delete", "*");
  })

parentWindow

const deleteEle = document.getElementById("deleteElement")
function doDelete(response) {
  if (response.data === "delete") {
    deleteEle.style.display = "none";
  } 
}
w.addEventListener("message", doDelete, false);

今回はdeleteというmessageで親子間でやりとりしてます。
子供から親のwindowに
window.parent.postMessage("delete", "*");
でmessageを送ります。（送るのは任意の文字です。今回は消すという意味でdeleteを送ってます。）
そして親では
w.addEventListener("message", doDelete, false);
でmessageを受け取ってdoDeleteという関数を実行しています。
関数の中で、response.dataとして受け取ったmessageがdeleteかどうかをif文で分岐させて、deleteだったら、要素にスタイルを当てて消すといった流れになってます。

とりあえずmessageが大切です。

最後に

postMessageは他にもいろんなことができそうですが、私の知識だとここいらが理解の限界だったので、勉強して参ります。
こんな感じで拙い説明と知識でしたが、アウトプットや知識共有の場として日々ネタがあれば投稿していきたいと思います。

はじめに

postMessageとは

使いかた

例として、子windowの中のBTNを押したら、親windowの中の要素を消してみる。

最後に

Discussion