關于Javascript跨域問題的解決方案已在之前的一片文章中詳細說明，詳見：http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx；

除了文中提到的3種解決方案之外，在今年的baidu salon分享會上黃方榮主講的《WEB數據交互的藝術》中提到一個非常優雅絕妙的解決方案！話不多說，直接上解決方案原理圖：

該圖要解決的問題說明如下：
在AAA.com域名下的index.htm頁面中內嵌了BBB.com域名下的一個頁面index.htm，正常情況下iframe內部的index.htm頁面是無法訪問父頁面index.htm中的任何dom對象或者js函數的，因為跨域，但我們經常又需要做一些參數回傳的事情怎么辦呢？以上的這種實現方式就很好的解決了這個問題；

解決方案的關鍵優雅之處在于：瀏覽器雖然會禁止js跨域訪問頁面中的對象，但對于iframe的層級關系引用并沒有做限制，即parent仍然可用；該方案就是利用了2層內嵌iframe、使用第二級iframe中的頁面與parent.parent的頁面是同域名的關系，從而避免跨域問題實現兩個頁面間相關數據的傳遞，本質上就是利用parent.parent實現對父父頁面中js的回調！

舉個實際的案例吧：
功能描述：
A域名下的頁面index.htm中內嵌了一個iframe頁面，iframe內引用的是B域名的sub-index.htm頁面，但是為了避免出現在index.htm頁面中出現滾動條，我們需要明確知道sub-index.htm頁面的高度和寬度，可是sub-index.htm的頁面內容是不可控的，可能會根據不同用戶頁面大小會不一樣；問題就是如何把sub-index.htm頁面的高度和寬度傳遞給index.htm頁面？

具體解決：
1、在index.htm頁面中聲明一個js函數process(height, width);用來實現設置頁面內iframe的高度和寬度；
2、在sub-index.htm頁面中再內嵌一個隱藏的iframe，iframe的src指向A域名下的頁面ex.htm?height=xx&width=yy，該頁面沒有任何內容，只是用來傳遞sub-index.htm頁面加載完之后的寬度和高度這兩個數據的，頁面內js拿到request中的參數之后直接調用parent.parent.process(height, width);完成對父頁面寬度和高度的設置；
看如下的這個時序圖：

原文鏈接：https://blog.csdn.net/sfdev/article/details/5807045

總結

以上是生活随笔為你收集整理的iframe跨域自适应高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。