跨域 iFrame 調整大小
由於跨域限制,從另一個域調整 iframe 大小的任務提出了挑戰。雖然三框架解決方案已經被提出,但它在 Chrome 和 Safari 等現代瀏覽器中面臨相容性問題。
建議的解決方案
儘管存在局限性,但有幾種方法探索實現跨域iframe調整大小:
-
EasyXDM:此第三方函式庫支援不同網域之間的通信,提供可靠的解決方案。但是,它需要在父域和子網域上進行整合。
-
postMessage:利用 HTML5 postMessage API,子網域可以傳送具有所需高度的訊息給父網域。然後,父域可以相應地調整 iframe 的大小。大多數瀏覽器都支援這種方法,提供跨瀏覽器解決方案。
-
ScrollHeight:測量子文件的scrollHeight屬性理論上可以提供iframe高度。但是,跨域限制拒絕存取此屬性。
挑戰與限制
由於瀏覽器安全功能,跨域通訊面臨限制:
-
計算樣式:檢查計算樣式iframe 元素顯示其尺寸,但這些值無法跨域存取。
-
文件屬性:HTML4 規範規定透過 document.element 公開只讀值,但跨域存取被拒絕。
-
代理框架:代理網站以計算高度,直到使用者登入或引入多個頁面請求為止
HTML5 解決方案
HTML5引入了促進跨域通訊的功能,包括:
-
postMessage :如前所述,postMessage 可以用於此目的
-
WebSockets:HTML5 WebSockets 為跨域通訊提供了強大的通道。
結論
雖然跨域iframe 調整大小仍然是一項技術上具有挑戰性的任務,但postMessage API 和HTML5 的進步提供了可行的解決方案。 easyXDM 的實作可以為不相容 HTML5 的瀏覽器提供可靠的後備。
以上是如何調整跨域 IFrame 的大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!