Open2022/10/25にコメント追加3

iframeのサイズを内部ページの最大サイズに合わせてページが見切れないようにする

HTML

JavaScript

Web

Kazuki Takahashi

Pardotフォームなどの、iframe内に配置するページ(子ページ)に以下のスクリプトを追加します。
このコードは、子ページが表示されたとき & 子ページのサイズが変更されたときに、最新の高さを親ページに送信します。

"https://example.com" となっている部分は、親ページのドメインに変更する必要があります。

<html>
    <head>
    <script>
    function sendClientHeightMessage() {
        var target = window.parent.postMessage ? parent : (window.parent.document.postMessage ? window.parent.document : undefined);
        if(!target || !document.body.scrollHeight){
            return
        }
        target.postMessage(
            {
                action: "SYNC_HEIGHT",
                value: document.body.scrollHeight
            },
            "https://example.com" // 親ページのドメイン
        );
    }
    window.addEventListener("load", sendClientHeightMessage);
    window.addEventListener("resize", sendClientHeightMessage);
    </script>
   </head>
   <body>
   <!-- コンテンツ -->
   </body>
</html>

Kazuki Takahashi

iframeを配置するページ(親ページ)に以下を追加します。
STUDIOの場合はGTMを利用してページビュートリガーで配信します。

<script>
window.addEventListener("message", function (e) {
  switch (e.data.action) {
    case 'SYNC_HEIGHT':
      var pardotFormContainer = document.getElementById('pardot-form-container'); // iframe コンテナ要素のID
      if(!pardotFormContainer){
        return;
      }
      pardotFormContainer.style.height = (e.data.value + 20) + 'px';
      return;
  }
});
</script>

Kazuki Takahashi

STUDIOの場合、iframeを設置するボックスのIDをpardot-form-containerとする必要があります
(コード側とSTUDIO側が一致していて、かつ重複がなければどんな名前でも大丈夫です)