動態 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中文網其他相關文章！
