クロスドメインコンテンツに基づいて iFrame のサイズを動的に変更するにはどうすればよいですか?-jsチュートリアル-php.cn

クロスドメインコンテンツに基づいて iFrame のサイズを動的に変更するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-30 10:26:10

オリジナル

1021 人が閲覧しました

How Can I Dynamically Resize an iFrame Based on its Cross-Domain Content?

コンテンツに基づいた iFrame のサイズ変更: クロスドメイン通信のナビゲート

クロスドメインの課題を理解する

iFrame 内に外部ドメインのコンテンツを表示する場合、同一オリジンポリシーでは、それらの iFrame に合わせて iFrame のサイズを動的に変更する際に課題が生じます。 content.

回避戦略

クロスドメイン制限を回避する手法の 1 つは、ネストされた iFrame 構造内のページ間の通信を可能にするブラウザーの癖を悪用することです。本質的には:

親ページ (www.foo.com/home.html) iframe 子ページ (www.bar.com/framed.html).
子ページ (www .bar.com/framed.html) iframe ヘルパーページ (www.foo.com/helper.html)。

これこの構造により、

www.bar.com/framed.html と www.foo.com/helper.html (同じ iFrame 内)
www.foo 間の通信が可能になります。 com/home.html と www.foo.com/helper.html (同じドメイン)

実装

www.foo.com/home.html 内:

<script>
  function resizeIframe(height) {
    document.getElementById("frame_name_here").height = parseInt(height) + 60;
  }
</script>
<iframe>

ログイン後にコピー

内www.bar.com/framed.html:

<body onload="iframeResizePipe()">
<iframe>

ログイン後にコピー

www.foo.com/helper.html:

<body onload="parentIframeResize()">
<script>
  function parentIframeResize() {
    var height = getParam("height");
    parent.parent.resizeIframe(height);
  }

  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&]*)");
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
  }
</script>

ログイン後にコピー

このソリューション親ページと同じドメイン上に存在し、子 iFrame と親 iFrame の間のサイズ変更リクエスト。

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