iframe嵌入其他網站,如何自適應高度


終於有一周時間,工作不那么忙了,騰出手來總結下工作過程中學到的知識。

每天遇到新問題,解決新問題,但是卻很少有時間去仔細研究下,或者總結下。攢的多了,就得從頭捋一遍。

說下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也可實現,待后續更新……

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM