專案中需要使用iframe巢狀另外乙個專案的子頁面,但是要求不能有滾動條,也就是說iframe的高度得根據巢狀頁面的高度自適應
由於跨域,所以父子頁面顯然是不能通訊的
第乙個想到的是最近才接觸到的window.name方式
**片段:
修改自此處
原理:當子iframe頁面onload後自身計算高度並寫在window.name中,父頁面修改iframe的src載入本地**頁後獲取高度,然後設定高度,並修改iframe的src為原來的位址(相當的彆扭!!)
而且這個方法是有缺陷的:
1, iframe會被載入2次(其中第二次是會被瀏覽器cache掉的)
2, 無法解決當iframe頁包含分頁後的高度自適應(有辦法解決,但是更彆扭)
昨天閒逛無意中發現完美解決方法,原文.
關鍵是window.top
原理不難:當跨域子頁面b載入完成後,計算高度,並動態載入**頁c(和父頁面a同域),同時將高度傳遞給c, c呼叫頂級頁面(也就是a),回傳引數.
經過簡單修改,以下是demo:
頁面a
子頁面b1
子頁面b2
**頁c
也就是說,應用a需要準備容器頁(framea)和**頁(framec), 應用b需要在頁面載入後計算高度, 然後動態載入應用a的**頁並傳遞高度引數.
(補充:其實通過現有技術通過nginx跳轉可以很方便的實現應用間的同域訪問)
跨域iframe的高度自適應
跨域iframe的高度自適應 1.跨子域的iframe高度自適應 2.完全跨域的iframe高度自適應 同域的我們可以輕鬆的做到 1.父頁面通過iframe的contentdocument或document屬性訪問到文件物件，進而可以取得頁面的高度，通過此高度值賦值給iframe tag。2.子頁面...
解決跨域iframe自適應高度
關於iframe自適應高度的討論可以先看看口碑ued的部落格 大概原理見下圖 可以直接看示例 下面直接上 了 下面是核心 loader.js 檔案proxy.html 使用方法 一 在主頁面要包含的iframe中引入loader.js 二 傳入引數。有兩種傳參方法 1.在主頁面引用iframe的時候...
iframe跨域高度自適應的實現
相容ie和ff,chrome 主框架 支援跨域的框架高度自適應 width 100 height 0 scrolling auto nl ad frameresize frameborder 0 子域的框架 這裡是框架的內容,自適應這裡的高度,支援跨域 asdfsdf asdfsdf asdfsdf...