如何使用 postMessage 調整來自不同網域的 Iframe 的大小？
- Mary-Kate Olsen原創
- 2024-12-05 18:39:10223瀏覽
使用 postMessage 調整來自不同領域的 Iframe 的大小
嘗試調整來自不同領域的 iframe 的大小可能是一項具有挑戰性的任務。雖然使用 easyXDM 作為非 HTML5 相容頁面的有效後備方案，但仍有值得考慮的替代解決方案。
其中一個解答是利用 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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn