iframe高度自适应bylin49940
以前没啥时间, 乱写了一个, 最近有空, 把整个代码重写了一遍, 修改了一些bug
<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 通过