ドメイン全体のコンテンツの高さに基づいて iframe のサイズを動的に変更するにはどうすればよいですか?

コンテンツの高さに基づいて iframe のサイズを変更する

iframe を使用して他のドメインのコンテンツを表示する場合、コンテンツに合わせて高さを調整すると、同一生成元ポリシーによる課題となる可能性があります。このポリシーは、異なるドメイン上のページ間の JavaScript 通信を制限します。

解決策:

この制限を克服するには、iframe コンテンツと iframe コンテンツの両方を含む複数ステップのアプローチが必要です。フレームページ。

1.クロスドメイン通信:

iframe コンテンツとフレーミング ページは異なるドメインにあるため、直接通信することはできません。ただし、別の iframe を使用して「パイプ」メカニズムを確立できます。

2.高さの計算とメッセージの受け渡し:

iframe コンテンツが読み込まれると、その高さが計算され、フレーミング ページ上の非表示の iframe のソースが同じドメインのヘルパー ページに設定され、計算された高さが渡されます。 URL の引数として使用します。

3.ヘルパー ページと親フレームのサイズ変更:

同じドメインのヘルパー ページは、iframe コンテンツから高さを受け取り、それを親フレームに伝えます。これにより、それに応じて iframe のサイズが変更されます。

コード:

フレーミングページ:

<script type="text/javascript">
  function resizeIframe(height) {
    document.getElementById('myIframe').height = height + 60;
  }
</script>
<iframe>

Iframe コンテンツ:

<script type="text/javascript">
  function setIframeHeight() {
    var height = document.body.scrollHeight;
    document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
  }
</script>
<iframe>

ヘルパーページ:

<script type="text/javascript">
  function resizeParentIframe() {
    var height = getParam('height');
    parent.parent.resizeIframe(height);
  }
  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&amp;#]*)");
    var results = regex.exec(window.location.href);
    return results ? results[1] : "";
  }
</script>

注:

このソリューションは、同一生成元ポリシーにより iframe コンテンツとヘルパー ページ間の JavaScript 通信が許可されていることを前提としています。そうでない場合は、追加の措置が必要になる場合があります。

以上がドメイン全体のコンテンツの高さに基づいて iframe のサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。