问题描述
今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题,效果同Demo1.
原因分析
问题是由引用的顺序引起的,我们假设有3层Iframe引用,h1.html,h2.html,h3.html h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题,一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开,这是因为页面是一级一级的加载下去的,当h1引用h2 时,h2的高度是固定的,当h3加载完毕的时候h2的高度做了变化,但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开,经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度,从而解决这个问题,原理主要是通过一直循环获取页面parent的 Iframe元素,当获取到top层时就结束
单个iframe适应
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->
onload
=
"
this.style.height=iframe1.document.body.scrollHeight
"
注:iframe1为该框架的ID,我在尝试不硬写名字的自适应方法,如果成功就换上来。
自适应多级iframe高度
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->
//
进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
function
autoHeight(){
var
doc
=
document, p
=
window;
while
(p
=
p.parent){
var
frames
=
p.frames, frame, i
=
0
;
while
(frame
=
frames[i
++
]){
if
(frame.document
==
doc){ frame.frameElement.style.height
=
doc.body.scrollHeight; doc
=
p.document;
break
; } }
if
(p
==
top){
break
; } } }
某网友评论:
帖一個我們之前用的方法吧,比較好用:
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->
var
getFFVersion
=
navigator.userAgent.substring(navigator.userAgent.indexOf(
"
Firefox
"
)).split(
"
/
"
)[
1
]
var
FFextraHeight
=
getFFVersion
>=
0.1
?
16
:
0
function
dyniframesize(iframename) {
var
pTar
=
null
;
if
(document.getElementById){ pTar
=
parent.document.getElementById(iframename); }
else
{ eval(
'
pTar =
'
+
iframename
+
'
;
'
); }
if
(pTar
&&
!
window.opera){
if
(pTar.contentDocument
&&
pTar.contentDocument.body.offsetHeight){ pTar.style.height
=
pTar.contentDocument.body.offsetHeight
+
FFextraHeight
+
25
; }
else
if
(pTar.Document
&&
pTar.Document.body.scrollHeight){ pTar.style.height
=
pTar.Document.body.scrollHeight; } } }