跨子域的iframe高度自適應

2022-08-11 14:33:10 字數 1630 閱讀 1900

比如 '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

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

根據自身內容調整高度

aaa

aaaa

a

可以看到與同域引入對比,只要在兩個頁面裡都加上document.domain就可以了

分別有以下資源

大關係就是  a->c->b ,a與b同網域名稱,b作為中間人,用位址列傳參形式,把c的高傳出來

這四個資源有如下關係

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

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

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

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

a.html

嵌入頁面c: 

b.html

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

c.html

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

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