如何動態調整iframe高度並繞過同源策略？

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