【javascript】サイトの再読み込み、リサイズがあった際、都度iframeの高さを取得して反映する。 | 電脳備忘録

高度に政治的な理由から、とあるLPサイトをifameでまるまる表示することになった。一見別サイトのように見せることができればそれでいいらしい・・・。

ドメインが異なる時点でクロスドメインが立ちはだかるのはわかりきっていたがやるしかない、いろんなサイトに掲載されていた方法を試し、このエントリーで紹介されていた方法で解決できた。

iframeの子の高さを親に伝える方法。しかもクロスドメイン
ECのウェブ担当者のメモ

子ページ設定

iframeに埋め込むページの設定。読み込み、リサイズがあったら高さを取得して値を親ページに渡す。仮に「https://examplw.co.jp/lp.html」とする

<body id="contents-body">
・
・
・
<script>
window.addEventListener("load", postSize, false);
window.addEventListener("resize", postSize, false);
function postSize(e) {
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
if (typeof target != "undefined" && document.body.scrollHeight)
target.postMessage(document.getElementById("contents-body").scrollHeight, "*");
}
</script>

親ページ設定

iframeを設置するページの設定。子から渡された高さの値をiframeに設定する。

iframeに子サイトのURL「https://examplw.co.jp/lp.html」を設定
javascriptで子サイトから高さの値を受け取とりiframeに設定する。

<iframe src="https://examplw.co.jp/lp.html" frameborder="no" scrolling="no" id="contents-body"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.addEventListener("message", receiveSize, false);
function receiveSize(e) {
if (e.origin === "https://examplw.co.jp") { //子サイトのドメインを設定
$('#contents-body').height(e.data);　 //iframeの高さ設定
}
}
<script>

いったんはこれで解決、画面サイズに変化があれば都度高さの値を取得して設定してくれるようになりました。あまりイレギュラーなことはしたくないですね・・・。