postMessageのパラメータにnameはありますか？

Question

とあるサイトで、
以下のコードを見つけたのですが、

parent.postMessage({name: window.name}, window.location.origin);

.postMessage()の文法をみると、
「otherWindow.postMessage(message, targetOrigin, [transfer]);」
と書いてありました。

実際に、postMessage()にnameはあるのでしょうか？

Answer 1

実際に、postMessage()にnameはあるのでしょうか？

入れても構いません。messageには、（送る側と受け取る側が処理できて、そしてシリアル化可能であれば）好きな形のオブジェクトを渡せます。

Comments

[maisumakun]

JSONで書けるようなオブジェクトであれば、間違いなく「シリアル化可能」です。

[退会済みユーザー]

ありがとうございます。入れても構わないことがわかりスッキリしました。

Answer 2

//me.html

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').addEventListener('click',()=>{
    var win=document.querySelector('#hoge').contentWindow;
    win.postMessage({name:"hoge"});
  });
});
</script>
<iframe src="you.html" id="hoge"></iframe>
<input type="button" value="change" id="btn">

//you.html

<script>
window.addEventListener('message',(e)=>{
  document.querySelector('#fuga').textContent=e.data.name;
});
</script>
<div id="fuga">fuga</div>

Comments

[退会済みユーザー]

コメントありがとうございます。

以下の場合、
どのように応用して書けば、
「you.htmlの中にあるid=yoyakuの高さを、me.htmlはiframe id="fuga"のみ受け取れるのでしょうか？

頂いたコードをもとに考えているのですが、
まだ分かりません。

//me.html
```HTML
<iframe id="fuga" src="you.html"></iframe>
<script>
window.addEventListener('message', function(e) {
if(e.origin=="https://hoge.com"){
document.getElementById("fuga").height = e.data;}},false);
</script>
```

//you.html
```HTML
<div id="yoyaku"></div>
function clientHeight() {
var h = window.document.getElementById('yoyaku').clientHeight;
window.parent.postMessage(h, "*");
}
```

[yambejp]

//me.html
<script>
window.addEventListener('DOMContentLoaded', ()=>{
});
window.addEventListener('message',(e)=>{
document.querySelector('#fuga').style.height=e.data;
});
</script>
<iframe src="you.html" id="fuga"></iframe>

//you.html
<script>
window.addEventListener('DOMContentLoaded',(e)=>{
parent.postMessage(document.querySelector('#yoyaku').getBoundingClientRect().height);
});
</script>
<div id="yoyaku">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>

[yambejp]

でも上記yoyakuはmarginやpaddingがあるのでもとのiframeのサイズより大きいですよ

[退会済みユーザー]

ありがとうございます。比較できて大変、勉強になりました。