終於有一周時間,工作不那么忙了,騰出手來總結下工作過程中學到的知識。
每天遇到新問題,解決新問題,但是卻很少有時間去仔細研究下,或者總結下。攢的多了,就得從頭捋一遍。
說下iframe自適應高度:
搜一下這個關鍵詞,網上一大堆,我沒遇到過那么多問題,所以看那些文章真的很沒耐心,目前階段就是用到什么學什么,這樣學的快記得深。用不到的知識,學的快,忘的快。
我們的網站作為平台需要將其他網站作為一個應用嵌入進來,並通過單點登錄驗證。那么問題來了,對方網站每個模塊頁面高度不同,有的是用瀑布流形式刷下來的,所以我這里無法將iframe的高度定死,必須自適應對方頁面的高度。
思路:
對方頁面載入后,拿到對方頁面的高度,然后把我的iframe高度設置成它的高度,一切就ok了。
問題一:拿到對方頁面的高度
首先這就是最大的問題,js不能跨域獲取對方頁面的頁面元素。那么什么是“跨域”:跨域問題是由於javascript語言安全限制中的“同源策略”造成的。
簡單來說,“同源策略”是指一段腳本只能讀取來自同一來源的窗口和文檔的屬性,同一來源:主機名、協議和端口號的組合。
也就是說,正常情況下,瀏覽器不允許我拿到它。很不爽!!!
好,想辦法——>我既然不能拿到,那能不能讓對方傳給我呢?因為是和對方合作,所以能夠聯系到對方幫忙做些改動,但是該如何改動呢?
一、對方頁面在完全被載入后,獲取自己的頁面高度;
二、對方頁面中引用一個我的頁面,該頁面在對方應用中並不展示,作為隱藏的部分,並把高度賦給該引入頁的標簽值
三、我的被引入頁面需要獲取傳入的高度,並將最外面的iframe的高度進行調整

網頁嵌套結構圖:

setInterval(function(){},200);js函數,每隔200毫秒執行前面參數的方法。
location.hash則可以用來獲取或設置頁面的標簽值。比如http://domain/#admin的location.hash="#admin"。
關鍵:
var a_iframe = parent.parent.document.getElementById("a_iframe");
實現了在對方頁面里獲取了我網頁的iframe,因為是同一個域所以能獲取到。這樣達到了“對方頁面獲取自己的高度,並通知我”這個目的。
朋友說用jsonp也可實現,待后續更新……
