iframe高度自适应bylin49940
2009-10-07 17:55
267 查看
以前没啥时间, 乱写了一个, 最近有空, 把整个代码重写了一遍, 修改了一些bug
1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个, 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.
2. 如果浏览器是ie, iframe的边框存在, 虽然是取了最大的高度, 但是还是会出现滚动条, 如果是IE浏览器, 并且iframe 有边框, 就取clientHeight, scrollHeight 和 自定义高度 中最大的一个再加上5px(可以更大)作为iframe 的高度. 其实还可以把自定义高度加进去比较的, 因为有时候你会想自己设定一个大一点的高度.
3. 添加了一个兼容性比较好的添加事件的方法.
4. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 监听 iframe 的 scroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.
5. 强烈建议把 load事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定load 事件的方法.
所以强烈建议把 load事件写在 <iframe>的属性onload里
6. 这个版本的最大改变就是对异常处理, 因为在子页面没完成加载或者跨域等情况下, 对子页面的操作会产生异常, 加强了这方面的处理.
timeHandleCount: 计数的值, 出现异常后再次尝试自适应的次数.
timeHandle: 延迟器setTimeOut的一个句柄, 延迟时间可以根据实践情况调整.
7. 子页面刷新后, 还是可以执行iframe 高度自适应方法, 并且这个方法是在子页面的 onload 事件后面执行的, 不会覆盖原来的方法.
写得不好的地方:
1. getBigger() 应该是只比较a,b ; 如果要比较a,b,c ; 可以 getBigger(getBigger(a,b),c); 我现在用的只能单纯比较3个
bug问题:
1. iframe高度只会增加, 不会减少.
3. 如果如jsp的页面中, <%%> 里面强制的执行了脚本命令, 可能有些意外情况(没测试)
以上在IE6.0, FF3.5 通过
下面是以前写的, 乱七八糟
空闲的时间写的这个东西, 参考了不少人的资料, 不过我这个还是有些特点的啦.
1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个. 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.
2. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 但是iframe 的onload 事件是不被触发的, 我不知道产生滚动条的事件, 只能监听 iframe 的 onscroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.
3. 强烈建议把 onload事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定onload 和 onscroll 事件的方法.
注意: 这里用了 new Fun......() , 所以这里执行了一次, 但是以后iframe里面的页面刷新了, iframe 绑定的onload 事件是不会再次执行的, 这是一个问题.
所以强烈建议把 onload事件写在 <iframe>的属性onload里
4. 有判断iframe 的页面是否正确加载了, 如果出现异常, 就设置一个600 的高度给这个iframe .
5. test6.html 为一个简单的页面, test5.html 是一个内嵌了一个iframe 的页面, 两者都能正确自适应高度.
写得不好的地方:
1. getBigger() 应该是只比较a,b ; 如果要比较a,b,c ; 可以 getBigger(getBigger(a,b),c); 我现在用的只能单纯比较3个
2. 添加iframe 的绑定事件方法可以写通用的, 然后在依次添加onload, onscroll 及其他事件
bug问题:
1. 如果浏览器是ie, iframe的边框存在, 那么自适应的高度会差一些, 还是有滚动条出现.
2. iframe高度只会增加, 不会减少.
3. 如果如jsp的页面中, <%%> 里面强制的执行了脚本命令, 可能有些意外情况(没测试)
4. iframe 里面的页面刷新后, 如果不是把 onload事件写在 <iframe>的属性onload里的话, iframe 的onload 事件不会执行
以上在IE6.0, FF3.0 通过
<HTML>
<HEAD>
<TITLE>IE FF iframe 自适应高度v2.0 by lin49940 </TITLE>
</HEAD>
<BODY>
<iframe name='myIfr' id='myIfr_1' frameborder=1 src="test2.html" mce_src="test2.html" scrolling='auto' width='100%' onload='suitSelf(this)' >
您的浏览器不支持iframe, 请换其他浏览器查看此页面
</iframe>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//取3个数字中最大的
function getBiggest(a, b, c){
if(isNaN(a)) a = 0;
if(isNaN(b)) b = 0;
if(isNaN(c)) c = 0 ;
alert("ch:" + a + " sh:" + b + " oh:" +c);
var tmp = Number(a) > Number(b)? a:b;
return Number(c) > Number(tmp)? c:tmp;
}
//取clientHeight, scrollHeight, offsetHeight 中最大的的
function getBiggestForBodyHeight(myIfrBody){
if(myIfrBody != null){
return getBiggest(myIfrBody.clientHeight, myIfrBody.scrollHeight, myIfrBody.offsetHeight) ;
}else return 0;
}
/*为对象添加事件, 兼容IE6, firefox, 这里不对参数进行验证,
不覆盖原来的事件方法, 而是在原来的事件方法后面再添加事件方法
obj 元素对象
type 事件名称, 不带on, 如load, click
fn 方法对象
auto 布尔值, 表示是否用最后一种方法
*/
var addEvent = function(obj, type, fn, auto){
if(!obj)return obj;
if (!auto &&obj.addEventListener){ //firefox
alert('ff: addEventListener');
obj.addEventListener(type, fn, false);//这个不先执行
}
else if(!auto && obj.attachEvent){ //IE
alert('ie: attachEvent ');
obj.attachEvent('on' + type, fn);
}else{ //other, 在firefox 无法执行
//alert('auto');
var oldEvent = eval('obj.document.body.on' + type);
//alert(oldEvent);
//alert(Object.prototype.toString.call(oldEvent));
eval('obj.document.body.on'+type+' = function(){ '+
'if(oldEvent && typeof oldEvent == "function"){ '+
' oldEvent(); '+
'} ' +
'fn() ' +
'} ');
}
return obj;
}
//自适应高度, 用clientHeight, scrollHeight, offsetHeight 中最大的的
function suitSelf(myIfrObj, trycount){
if(myIfrObj == null) alert(' suitSelf myIfrObj is null');
if(!trycount) trycount = 15;
try{
if(myIfrObj.timeHandle)
clearTimeout(timeHandle);
var myIfrBody = myIfrObj.contentWindow.document.body; //contentWindow是为了适应ff
//getAttribute 不是取属性兼容性最好的写法
if(document.all && myIfrObj.getAttribute('frameborder') == '1'){
//有边框, 在IE 中会出现滚动条, 所以加一个大于边框宽度的数字,
//由于offsetHeight是只读的, 并且每次会等于 myIfrObj.style.height, 所以抛弃不进行比较
myIfrObj.style.height = getBiggest(myIfrBody.clientHeight, myIfrBody.scrollHeight, myIfrObj.height) + 5 ;
}else
myIfrObj.style.height = getBiggestForBodyHeight(myIfrBody);
//添加滚动条事件, 不会覆盖iframe里面的页面的相关方法
//这里要避免重复执行, IE也可以是myIfrObj.contentWindow.document.body, ff不行
addEvent(myIfrObj.contentWindow,'scroll',function(){
suitSelf(myIfrObj);
});
//附带一个iframe内容的点击事件, 如果不需要可以去掉
addEvent(myIfrObj.contentWindow.document.body,'click',function(){ alert('onclick event');});
}catch(e){//页面还没加载完成或跨域都会抛异常
//alert(e);
if(!myIfrObj.timeHandleCount)
myIfrObj.timeHandleCount = 1;
else
++myIfrObj.timeHandleCount;
if(myIfrObj.timeHandleCount <= trycount){
myIfrObj.timeHandle = setTimeout(function(){
suitSelf(myIfrObj)
},
200); //如果加载事件很长, 建议把等待时间加大
}
}
}
//-->
</SCRIPT>
</HTML>1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个, 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.
2. 如果浏览器是ie, iframe的边框存在, 虽然是取了最大的高度, 但是还是会出现滚动条, 如果是IE浏览器, 并且iframe 有边框, 就取clientHeight, scrollHeight 和 自定义高度 中最大的一个再加上5px(可以更大)作为iframe 的高度. 其实还可以把自定义高度加进去比较的, 因为有时候你会想自己设定一个大一点的高度.
3. 添加了一个兼容性比较好的添加事件的方法.
4. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 监听 iframe 的 scroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.
5. 强烈建议把 load事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定load 事件的方法.
addEvent(myIfrObj.contentWindow,"load",function(){ suitSelf(myIfrObj)});所以强烈建议把 load事件写在 <iframe>的属性onload里
6. 这个版本的最大改变就是对异常处理, 因为在子页面没完成加载或者跨域等情况下, 对子页面的操作会产生异常, 加强了这方面的处理.
}catch(e){//页面还没加载完成或跨域都会抛异常
//alert(e);
if(!myIfrObj.timeHandleCount)
myIfrObj.timeHandleCount = 1;
else
++myIfrObj.timeHandleCount;
if(myIfrObj.timeHandleCount <= trycount){
myIfrObj.timeHandle = setTimeout(function(){
suitSelf(myIfrObj)
},
200); //如果加载事件很长, 建议把等待时间加大
}
}timeHandleCount: 计数的值, 出现异常后再次尝试自适应的次数.
timeHandle: 延迟器setTimeOut的一个句柄, 延迟时间可以根据实践情况调整.
7. 子页面刷新后, 还是可以执行iframe 高度自适应方法, 并且这个方法是在子页面的 onload 事件后面执行的, 不会覆盖原来的方法.
写得不好的地方:
1. getBigger() 应该是只比较a,b ; 如果要比较a,b,c ; 可以 getBigger(getBigger(a,b),c); 我现在用的只能单纯比较3个
bug问题:
1. iframe高度只会增加, 不会减少.
3. 如果如jsp的页面中, <%%> 里面强制的执行了脚本命令, 可能有些意外情况(没测试)
以上在IE6.0, FF3.5 通过
下面是以前写的, 乱七八糟
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>IE FF iframe 自适应高度测试, 对于有自我保护的页面, 此方法不可以 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY onload='onL()' >
<input type='text' value='adfadf' id='myInp' />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type='button' value='hidden if1' id='myInp2' onclick=''/>
<input type='button' value='hidden if2' id='myInp3' onclick='gg()'/>
<br />
<iframe name='myIfr' id='myIfr_1' frameborder=0 src='test6.html' scrolling='auto' width='100%' onload='suitSelf(this)' >您的浏览器不支持iframe, 请换其他浏览器查看此页面</iframe>
<iframe name='myIfr' id='myIfr_2' frameborder=0 src='test5.html' scrolling='auto' width='100%' >您的浏览器不支持iframe, 请换其他浏览器查看此页面</iframe>
<br />
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//取3个数字中最大的
function getBigger(a, b, c){
if(isNaN(a)) a = 0;
if(isNaN(b)) b = 0;
if(isNaN(c)) c = 0 ;
var tmp = Number(a) > Number(b)? a:b;
return Number(c) > Number(tmp)? c:tmp;
}
//取clientHeight, scrollHeight, offsetHeight 中最大的的
function getBiggestForBodyHeight(myIfrBody){
if(myIfrBody != null){
return getBigger(myIfrBody.clientHeight, myIfrBody.scrollHeight, myIfrBody.offsetHeight) ;
}else return 0;
}
//自适应高度, 用clientHeight, scrollHeight, offsetHeight 中最大的的
function suitSelf(myIfrObj){
//alert('suitSelf');
//alert(myIfrObj.contentWindow.document.body.clientHeight);
if(myIfrObj == null) alert(' suitSelf myIfrObj is null');
try{
var myIfrBody = myIfrObj.contentWindow.document.body; //contentWindow是为了适应ff
if(myIfrBody == null) { //如果iframe页面没有正确加载, body不能获取, 自己设置一个高度
alert('suitSelf myIfrBody is null');
myIfrObj.style.height = 600;
}
else
myIfrObj.style.height = getBiggestForBodyHeight(myIfrBody);
}catch(e){}
}
function ifrOnload(myIfrObj){
var oldonload = myIfrObj.contentWindow.document.body.onload;
if (typeof oldonload == 'function') {
oldonload();
}
suitSelf(myIfrObj);
alert('onload') ;
}
var al = function(){alert('alert');};
//如果不在iframe的onload里面定义方法, 这个方法可以添加iframe 的onload事件,
//但是建议在<iframe> 的属性onload里面绑定事件, 这样的兼容性是最好的
// new function 这个是关键, 如果是function而已, 添加的方法不起作用
function suitSelf2(myIfrObj){
myIfrObj = myIfrObj == null ? document.getElementById('myIfr_2') : myIfrObj;
if(myIfrObj == null) alert(' suitSelf2 myIfrObj is null');
var myIfrBody = myIfrObj.contentWindow.document.body;
if(myIfrBody == null){ //如果iframe页面没有正确加载, body不能获取, 自己设置一个高度
alert('suitSelf2 myIfrBody is null');
myIfrObj.style.height = 600;
}
//alert(myIfrObj.tagName);
if (myIfrObj.attachEvent){ //ie
alert('assad1');
myIfrObj.contentWindow.attachEvent("onload", new function(){ suitSelf(myIfrObj)}); //new 也是必要的, 不过就在这里运行一次而已
myIfrObj.contentWindow.attachEvent("onscroll",function(){ //contentWindow必要
suitSelf(myIfrObj);
alert('onscroll');
});
}
else if(myIfrObj.contentWindow.addEventListener){ //Mozilla, firefox, 不要在addEventListener直接 suitSelf(myIfrObj);
alert('assad2');
myIfrObj.contentWindow.addEventListener("load", new function(){ suitSelf(myIfrObj);}, false); //new 也是必要的, 不过就在这里运行一次而已
//alert('myIfrObj.contentWindow: ' + myIfrObj.contentWindow);
myIfrObj.contentWindow.addEventListener("scroll", function(){ //
suitSelf(myIfrObj);
alert('onscroll')}, false);
}
else {
alert('assad3');
myIfrObj.contentWindow.onload = ifrOnload(myIfrObj);
myIfrObj.contentWindow.onscroll = function(){
suitSelf(myIfrObj);
alert('onscroll');
};
}
}
//测试用的
function onL(){
//alert(document.body.clientHeight); //ie 856 ff 862 (100%) , ie 856 ff 862 , 空 iframe ie 856 ff 862
//alert(document.body.scrollHeight); //ie 274 ff 862 (100%) , ie 274 ff 862 , 空 iframe ie 424 ff 862
var myIfrObj = document.getElementById('myIfr_2');
if(myIfrObj == undefined){
alert('myIfrObj2 is null') ;
}
suitSelf2(myIfrObj);
//alert(myIfrObj.contentWindow.onload);
//alert(myIfr.contentWindow.document.body.clientHeight); // ie 146 ff 150 test6.html
}
function gg(){
var obj = document.getElementById('myIfr_1');
obj.src = 'test6.html'
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
var iframe = document.createElement("iframe");
iframe.src = "http://www.laoney.net";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
alert("Local2 iframe is now loaded.");
};
}
document.body.appendChild(iframe);
//-->
</SCRIPT>
</HTML>空闲的时间写的这个东西, 参考了不少人的资料, 不过我这个还是有些特点的啦.
1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个. 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.
2. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 但是iframe 的onload 事件是不被触发的, 我不知道产生滚动条的事件, 只能监听 iframe 的 onscroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.
3. 强烈建议把 onload事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定onload 和 onscroll 事件的方法.
myIfrObj.contentWindow.attachEvent("onload", new function(){ suitSelf(myIfrObj)});注意: 这里用了 new Fun......() , 所以这里执行了一次, 但是以后iframe里面的页面刷新了, iframe 绑定的onload 事件是不会再次执行的, 这是一个问题.
所以强烈建议把 onload事件写在 <iframe>的属性onload里
4. 有判断iframe 的页面是否正确加载了, 如果出现异常, 就设置一个600 的高度给这个iframe .
5. test6.html 为一个简单的页面, test5.html 是一个内嵌了一个iframe 的页面, 两者都能正确自适应高度.
写得不好的地方:
1. getBigger() 应该是只比较a,b ; 如果要比较a,b,c ; 可以 getBigger(getBigger(a,b),c); 我现在用的只能单纯比较3个
2. 添加iframe 的绑定事件方法可以写通用的, 然后在依次添加onload, onscroll 及其他事件
bug问题:
1. 如果浏览器是ie, iframe的边框存在, 那么自适应的高度会差一些, 还是有滚动条出现.
2. iframe高度只会增加, 不会减少.
3. 如果如jsp的页面中, <%%> 里面强制的执行了脚本命令, 可能有些意外情况(没测试)
4. iframe 里面的页面刷新后, 如果不是把 onload事件写在 <iframe>的属性onload里的话, iframe 的onload 事件不会执行
以上在IE6.0, FF3.0 通过
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现iframe自适应高度的方法示例
- Iframe自适应高度_IE_FF下都可用
- iframe 自适应高度
- 【转】再谈iframe自适应高度
- js控制iframe的高度/宽度让其自适应内容
- jquery库实现iframe自适应内容高度和宽度
- 兼容主流浏览器的iframe自适应高度js脚本
- 实现iFrame自适应高度
- Iframe高度自适应
- jquery库实现iframe自适应内容高度和宽度
- iframe 自适应高度总结
- jquery 实现iframe 自适应高度
- 关于iframe自适应高度的做法 在同一个域下面
- IFRAME 自适应高度
- iframe 自适应高度最简单代码
- iframe 自适应高度问题解决方法
- Iframe高度自适应（兼容IE/Firefox、同域/跨域）[转]
- JS 关于浏览器之间 scrollHeight offsetHeight (比如 iframe自适应高度时...)
- iframe高度自适应内容
- js控制iframe自适应高度