跨域iframe的高度自適應

2021-08-28 08:37:20 字數 1422 閱讀 7837

跨域iframe的高度自適應

1. 跨子域的iframe高度自適應

2. 完全跨域的iframe高度自適應

同域的我們可以輕鬆的做到

1. 父頁面通過iframe的contentdocument或document屬性訪問到文件物件,進而可以取得頁面的高度,通過此高度值賦值給iframe tag。

2. 子頁面可以通過parent訪問到父頁面裡引入的iframe tag,進而設定其高度。

但跨域的情況則不允許對子頁面或父頁面的文件進行訪問(返回undefined),所以我們要做的就是打通或間接打通這個壁壘。

比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',這種跨子域的頁面

3.html

4.html

這是乙個ifrmae,嵌入在3.html裡

根據自身內容調整高度aa

aaaa

aa

分別有以下資源

這四個資源有如下關係

1. a裡嵌入c,a和c是不同域的,即跨域iframe

2. c裡嵌入b,c和b是不同域的,但a和b是同域的

3. c裡嵌入d.js,d.js放在和a同域的專案裡

通過乙個間接方式實現,即通過乙個隱藏的b.html來實現高度自適應。

a.html

b.html

嵌入在c頁面中,它是隱藏的,通過parent.parent訪問到a,再改變a的iframe(c.html)高度,這是最關鍵的,因為a,b是同域的所以可以訪問a的文件物件等。

c.html

嵌入在a中,和a不同域,要實現c的自適應,c多高則a裡的iframe就設為多高。c裡嵌入b.html 和 d.js

aa

aaaa

aaaa

aaaa

aa

d.js

在頁面c載入後計算其高度,然後將計算出的height賦值給c裡引入的iframe(b.html)的src

// 計算頁面的實際高度,iframe自適應會用到

function calcpageheight(doc)

window.onload = function()

};

線上示例:

跨域iframe的高度自適應

解決跨域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...

跨子域的iframe高度自適應

比如 a.jd.com 3.html 嵌入了 b.jd.com 4.html 這種跨子域的頁面 3.html12 3456 78910 1112 13 4.html12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 2728 這是乙個ifrma...