過去にあった質問内容に類似のものがあり、参考にしましたが解決できなかった為、投稿させていただきます。
背景・実現したいこと
子ぺージから取得した要素の高さをpostMessageで親ページに送信し、iframeのheightに反映したい。
上手くいかないところ
postMessageで送信した値の取得ができない。
console.dir(event)で値の確認をしたいのですが、そもそも postMessageで送信できていないのか値が取得できません。
postMessageで送信するにはどうしたらいいのでしょうか？
回答いただけると幸いです。
ソースコード
[フォームブリッジ iframe内で使用しているコード]
// 要素の隠れた部分も含めた高さを取得
function sendHeight() {
const elementHeight = document.documentElement.scrollHeight;
// 取得した高さを表示
console.log("sendHeight.js" , elementHeight)
window.parent.postMessage(elementHeight, "https://leanonme.co.jp");
}
// 実行
window.addEventListener("load", sendHeight);
[親ページのソースコード iframeを埋め込んでいる]
'use strict';
// 受信メッセージのチェック
function receiveMessage(event) {
if (event.origin !=="https://leanonme.co.jp") {
return;
}
if (event ===null) {
return;
}
console.log("receiveMessage 処理中")
console.dir(event);
changeElementHeight(event.data);
}
// 要素の高さを変更する
function changeElementHeight(height) {
document.getElementById("formBridge_contact").height = height;
}
// 実行
window.addEventListener("message", receiveMessage);