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