同一生成元ポリシーをバイパスしながら iframe の高さを動的に調整するにはどうすればよいですか?

動的 iframe 高さ調整

iframe を介して外部ソースからのコンテンツを統合する場合、適切な高さ調整を確保することが重要になります。この記事では、同一オリジン ポリシーを回避し、コンテンツに合わせて iframe のサイズを自動的に変更できるようにするソリューションについて詳しく説明します。

ブラウザの癖を利用して同一オリジン ポリシーをバイパスする

重要なのは、親ドメインが iframe と通信できる一方で、iframe は通信できないブラウザの特性を利用することにあります。親と直接通信します。この通信階層を以下に示します。

Page	Can Communicate With
www.foo.com/home.html	N/A (parent)
www.bar.net/framed.html	www.foo.com/helper.html (child)
www.foo.com/helper.html	www.foo.com/home.html (parent)

URL 引数を使用した高さ情報の受け渡し

iframe の高さを決定するには、コンテンツ ページ (www.bar.net/) framed.html) はそれを計算し、URL 引数を介してヘルパー iframe (親と同じドメインにある) の src 属性を設定します。次に、ヘルパー iframe はこの情報を親に転送し、親はそれに応じて iframe の高さを調整できます。

コード実装

www.foo.com/home。 html (親ページ):

function resizeIframe(height) {
  // Adjust the iframe height with a slight margin
  document.getElementById('frame_name_here').height = parseInt(height) + 60;
}

www.bar.net/framed.html (子ページ):

function iframeResizePipe() {
  // Calculate and pass the height to the helper iframe
  var height = document.body.scrollHeight;
  var pipe = document.getElementById('helpframe');
  pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}

www.foo .com/helper.html (ヘルパー ページ):

function parentIframeResize() {
  // Extract the height from the URL argument
  var height = getParam('height');

  // Communicate the height to the parent page
  parent.parent.resizeIframe(height);
}

以上が同一生成元ポリシーをバイパスしながら iframe の高さを動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。