如何使用 postMessage 調整來自不同網域的 Iframe 的大小？
使用 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
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055612無法在Windows 10中安裝？
4 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
北端：融合系統，解釋
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
每周平台新聞：HTML加載屬性，主要的ARIA規格以及從iframe轉移到Shadow dom
Apr 17, 2025 am 10:55 AM
在本週的平台新聞綜述中，Chrome引入了一個用於加載的新屬性，Web開發人員的可訪問性規範以及BBC Move
託管您自己的非JavaScript分析的選項
Apr 15, 2025 am 11:09 AM
有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）
