當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

iframe高度宽度自适应（转）

發(fā)布時(shí)間：2025/3/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 iframe高度宽度自适应（转）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?http://www.cnblogs.com/snandy/p/3900016.html

跨子域的iframe高度自適應(yīng)
完全跨域的iframe高度自適應(yīng)

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

1. 父頁面通過iframe的contentDocument或document屬性訪問到文檔對(duì)象，進(jìn)而可以取得頁面的高度，通過此高度值賦值給iframe tag。

2. 子頁面可以通過parent訪問到父頁面里引入的iframe tag，進(jìn)而設(shè)置其高度。

但跨域的情況則不允許對(duì)子頁面或父頁面的文檔進(jìn)行訪問（返回undefined），所以我們要做的就是打通或間接打通這個(gè)壁壘。

一、跨子域的iframe高度自適應(yīng)

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

3.html

1 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE html> <html> ??<head> ????<meta charset='utf-8'?/> ????<title>1.html</title> ????<script type="text/javascript"> ????????document.domain =?'jd.com' ????</script> ??</head> ??<body> ?????<iframe id="ifr"?src="b.jd.com/4.html"?frameborder="0"?width="100%"></iframe> ??</body> </html>

4.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html> <html> ??<head> ????<meta charset="utf-8"> ????<title>2.html</title> ????<script type="text/javascript"> ????????document.domain =?'jd.com' ????</script> ??</head> ??<body> ?????<p>這是一個(gè)ifrmae，嵌入在3.html里 </p> ?????<p>根據(jù)自身內(nèi)容調(diào)整高度</p> ?????<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <script> ????// 計(jì)算頁面的實(shí)際高度，iframe自適應(yīng)會(huì)用到 ????function?calcPageHeight(doc) { ????????var?cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) ????????var?sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) ????????var?height? = Math.max(cHeight, sHeight) ????????return?height ????} ????window.onload =?function() { ????????var?height = calcPageHeight(document) ????????parent.document.getElementById('ifr').style.height = height +?'px'????? ????} </script> ??</body> </html>

可以看到與上一篇對(duì)比，只要在兩個(gè)頁面里都加上document.domain就可以了

二、完全跨域的iframe高度自適應(yīng)

分別有以下資源

頁面 A：http://snandy.github.io/lib/iframe/A.html
頁面 B：http://snandy.github.io/lib/iframe/B.html
頁面 C：http://snandy.jd-app.com
D.js：http://snandy.github.io/lib/iframe/D.js

這四個(gè)資源有如下關(guān)系

1. A里嵌入C，A和C是不同域的，即跨域iframe

2. C里嵌入B，C和B是不同域的，但A和B是同域的

3. C里嵌入D.js，D.js放在和A同域的項(xiàng)目里

通過一個(gè)間接方式實(shí)現(xiàn)，即通過一個(gè)隱藏的B.html來實(shí)現(xiàn)高度自適應(yīng)。

A.html

嵌入頁面C:?http://snandy.jd-app.com?

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html> ??<head> ????<meta charset='utf-8'?/> ????<title>A.html</title> ??</head> ??<body> ????<iframe id="ifr"?src="http://snandy.jd-app.com"?frameborder="0"?width="100%"></iframe> ??</body> </html>

B.html

嵌入在C頁面中，它是隱藏的，通過parent.parent訪問到A，再改變A的iframe(C.html)高度，這是最關(guān)鍵的，因?yàn)锳，B是同域的所以可以訪問A的文檔對(duì)象等。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html> <html> ??<head> ????<meta charset='utf-8'?/> ????<title>B.html</title> ??</head> ??<body> ????<script type="text/javascript"> ????????window.onload =?function() { ????????????var?isSet =?false ????????????var?inteval = setInterval(function() { ????????????????var?search = location.search.replace('?',?'') ????????????????if?(isSet) { ????????????????????clearInterval(inteval) ????????????????????return?? ????????????????} ????????????????if?(search) { ????????????????????var?height = search.split('=')[1] ????????????????????var?doc = parent.parent.document ????????????????????var?ifr = doc.getElementById('ifr') ????????????????????ifr.style.height = height +?'px' ????????????????????isSet =?true ????????????????} ????????????}, 500) ????????} ????</script> ??</body> </html>

C.html

嵌入在A中，和A不同域，要實(shí)現(xiàn)C的自適應(yīng)，C多高則A里的iframe就設(shè)為多高。C里嵌入B.html 和 D.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!doctype html> <html> <head> ????<title>C.html</title> ????<meta charset="utf-8"> </head> <body> ????<h3>這是一個(gè)很長(zhǎng)的頁面，我要做跨域iframe的高度自適應(yīng)</h3> ????<ul> ????????<li>頁面 A：http://snandy.github.io/lib/iframe/A.html</li> ????????<li>頁面 B：http://snandy.github.io/lib/iframe/B.html</li> ????????<li>頁面 C：http://snandy.jd-app.com</li> ????????<li>D.js：http://snandy.github.io/lib/iframe/D.js</li> ????</ul> ????<p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p> ????<iframe id="myifr"?style="display:none"?src="http://snandy.github.io/lib/iframe/B.html"></iframe> ????<script type="text/javascript"?src="http://snandy.github.io/lib/iframe/D.js"></script> </body> </html>

D.js

在頁面C載入后計(jì)算其高度，然后將計(jì)算出的height賦值給C里引入的iframe（B.html）的src

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 計(jì)算頁面的實(shí)際高度，iframe自適應(yīng)會(huì)用到 function?calcPageHeight(doc) { ????var?cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) ????var?sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) ????var?height? = Math.max(cHeight, sHeight) ????return?height } window.onload =?function() { ????var?doc = document ????var?height = calcPageHeight(doc) ????var?myifr = doc.getElementById('myifr') ????if?(myifr) { ????????myifr.src =?'http://snandy.github.io/lib/iframe/B.html?height='?+ height ????????// console.log(doc.documentElement.scrollHeight)????? ????} };

線上示例：http://snandy.github.io/lib/iframe/A.html

轉(zhuǎn)載于:https://www.cnblogs.com/greenteaone/p/4534531.html

總結(jié)

以上是生活随笔為你收集整理的iframe高度宽度自适应（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： BFS Codeforces Round
下一篇： android tween动画效果