跨域iframe高度自適應(兼容IE/FF/OP/Chrome)

跨域iframe高度自適應(兼容IE/FF/OP/Chrome)

 

採用JavaScript來控制iframe元素的高度是iframe高度自適應的關鍵，同時因爲JavaScript對不一樣域名下權限的控制，引起出同域、跨域兩種狀況。

因爲客戶端js使用瀏覽器的同源安全策略，跨域狀況下，被嵌套頁面若是想要獲取和修改父頁面的DOM屬性會出現權限不足的狀況，提示錯誤：Permission denied to access property 'document'。這是由於除了包含腳本的文檔載入的主機外，同源策略禁止客戶端腳本連接到其餘任何主機或者訪問其餘任何主機的數據。這意味着訪問一個web服務的javascript代碼一般只有在它也駐留在Web服務自己所在的同一個服務器的時候纔有用。

因此在跨域狀況下，咱們遇到的問題就是：父窗口沒法得到被嵌套頁面的高度,並且被嵌套頁面也沒法經過駐留在其服務器上的js修改父窗口Dom節點的屬性。因此咱們須要一個媒介，來得到被嵌套頁面的高度同時又能修改主界面iframe節點的高度。

思路：現 有主界面main在域a下，被嵌套頁面B在域b下，被嵌套頁面B又嵌套一個在域a下的中介頁面A。 當用戶打開瀏覽器訪問mail.html的時候載入B，觸發B的onload事件獲取其自身高度，而後B載入A,並將高度值做爲參數賦值給A的 location對象。這樣A就能夠經過location.hash得到B的高度。（location是javascript裏邊管理地址欄的內置對象，好比location.href就管理頁面的url，用location.href=url就能夠直接將頁面重定向url。而location.hash則能夠用來獲取或設置頁面的標籤值。好比http://domain/#admin的location.hash="#admin"。利用這個屬性值能夠作一些很是有意義的事情。）。因爲A和main頁面同域，因此能夠修改main的dom節點屬性，從而達到咱們設置iframe標籤高度的目的。

關鍵代碼：

iframe主頁面：main.html

<iframe id="iframeB"  name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>

 

iframe嵌套頁面：B.html

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>

<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight; //獲取自身高度
urlC = "www.a.com/A.html"; //設置iframeA的src
document.getElementById("iframeA").src=urlC+"#"+hashH; //將高度做爲參數傳遞
}
window.onload=sethash;
</script>

中介頁面：A.html

<script>
function pseth() {
var iObj = parent.parent.document.getElementById('iframeB');//A和main同域，因此能夠訪問節點
iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//訪問本身的location對象獲取hash值
iObj.style.height = iObjH.split("#")[1]+"px";//操做dom
}
pseth();
</script>

同域狀況下就不用多說了，直接在被嵌套的頁面B中獲取其自身高度並操做其父窗口main的dom屬性便可。