postMessage を使用して別のドメインの iframe のサイズを変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

postMessage を使用して別のドメインの iframe のサイズを変更するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-05 18:39:10

オリジナル

225 人が閲覧しました

How Can I Resize an Iframe from a Different Domain Using postMessage?

postMessage を使用した別のドメインからの iframe のサイズ変更

別のドメインからの iframe のサイズを変更しようとすると、困難な作業になる可能性があります。 easyXDM の使用は HTML5 非準拠ページの効果的なフォールバックとして機能しますが、検討に値する代替ソリューションもあります。

そのようなソリューションの 1 つは、postMessage を利用することです。このメソッドでは、子ページの高さを親ページに渡し、それに応じて iframe の高さを調整します。

実装の詳細

子ページ

次を使用して子ページの高さを計算します。 document.getElementById('element_id).scrollHeight.
parent.postMessage(actual_height,"*"); を使用して高さを親ページにポストします。アスタリスクを使用すると、ドメインに関係なく任意の親 iframe に投稿できます。

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id').scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads
</body>

ログイン後にコピー

親ページ

イベントリスナーを親ウィンドウに追加して、子ページからメッセージを受信します。 iframe_id を iframe ID に置き換えます。
受信した高さに基づいて iframe の高さを更新します。

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

ログイン後にコピー

postMessage を使用する利点

クロスドメイン通信: postMessage を使用すると、異なるドメイン間の通信が可能になります。別のオリジンからの iframe のサイズ変更に適しています。
高さの計算: 子ページは高さを正確に計算して親ページに伝え、iframe の適切なサイズ変更を保証します。
シンプルさ: 実装は簡単で、必要なコードは最小限です変更。

以上がpostMessage を使用して別のドメインの iframe のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。