postMessage で受け取る値がバラバラになる。

現在、以下のような状態で作業を行っています。

A サイト

URL: http://〇〇〇〇〇.com/
私が作業しているわけではなく、他の会社の方が作業している。
検証用のため、SSL の設定は行っていない。

B サイト

URL: http://XXXXX.jp/
こちらは私が作業している。
こちらも検証用のため、SSL の設定は行っていない。

今回行いたいことは、B サイトで作成したページを、A サイトのページの一部に iframe で表示させたいと思っています。
その際、B サイトのページの高さを取得して、A サイト側に渡して iframe の高さを設定することになっています。

B サイト側では以下のようなソースコードになっています。

<!DOCTYPE html>
    :
    <body>
        :
        :
        :
        <script>
            var h = document.documentElement.scrollHeight;
            console.log(h);     // ここの値がバラバラになる!
            parent.postMessage(h, "*");
        </script>
    </body>
</html>

A サイト側では以下のようなソースコードになっています。

<div>
    <iframe src="http://XXXXX.jp/iframe/page/" id="frame" frameborder="0"></iframe>
</div>
:
:
<script>
    window.addEventListener('message', function (e) {
        document.getElementById('frame').height = e.data;
    }, false);
</script>

今回問題になっているのは、A サイトのページを読み込む時、iframe の箇所の B サイトの高さがバラバラになってしまうという点です。
B サイトのページは動的に値が表示されるため、多少の高さのバラつきは想定していて、「 document.documentElement.scrollHeight 」の値は 1700 前後になるのですが、
なぜか「 0 」になったり、「 3000 」になったりして、A サイト側のページでは iframe の部分が表示されなくなったり、余計な空白ができてしまいます。
なお、B サイトのページを直接ブラウザで確認すると、値はバラバラになりません。

色々と検証しましたが、どうしてもバラバラになってしまいます。
どこに原因があるのか、わかる方がいらっしゃいましたら、回答していただけると幸いです。

行動規範の内容に同意します

回答1件

Bサイト側でDOMの読み込み前にメッセージを送信していることが有るからじゃないでしょうか？

child
1<!DOCTYPE html>
2<html>
3  <body>
4    child
5    <script>
6      window.onload = () => {
7        var h = document.documentElement.scrollHeight;
8        console.log(h);
9        parent.postMessage(h, "*");
10      };
11    </script>
12  </body>
13</html>
14
15<style>
16  html {
17    box-sizing: border-box;
18    height: 1000px;
19    border: 1px solid red;
20  }
21</style>
22

parent
1<html>
2  <p>parent</p>
3  <div>
4    <iframe src="./child.html" id="frame" frameborder="0"></iframe>
5  </div>
6  <p>parent</p>
7</html>
8
9<script>
10  window.addEventListener(
11    "message",
12    function (e) {
13      document.getElementById("frame").height = e.data;
14    },
15    false
16  );
17</script>

3000になる理由はわかりませんが。

投稿2021/08/14 06:45

k_a

総合スコア983

tk-spider

2021/08/14 08:24

回答いただき、ありがとうございます。ただ、そのやり方は既に検証しました。結果は同じでした。確かに、高さが 0 になる理由はなんとなくわかるのですが、想定以上の高さ、つまり 3000 という値が取得してしまう理由が全然わからないのです。ちなみに、この現象は Safari だと起こらず、Chrome で発生する現象なのです。

行動規範の内容に同意します