ホームページ >ウェブフロントエンド >jsチュートリアル >クロスドメイン コンテンツに基づいて iFrame のサイズを動的に変更するにはどうすればよいですか?
クロスドメイン コンテンツに基づいて iFrame のサイズを動的に変更するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-12-30 10:26:101023ブラウズ
コンテンツに基づいた 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。