您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 信息化管理 > Iframe框架高度自适应的实现
(一)Iframe框架高度自适应的实现Iframe框架高度自适应的实现,一个很牛的团队写的,简单的说就是在A.html中iframe引用B.htm(高度是不断变化的)并且自适应高度.网上也有很多方法,但是有些不全兼容ie6,ie7,ff,opera,在此贴下兼容ie6,ie7,ff,opera下的高度自适应的代码,并且已经封装好,只需要在被引用的页面加入这段代码scripttype=”text/javascript”src=”iframeAutoFit.js”mce_src=”iframeAutoFit.js”/scriptfunctioniframeAutoFit()1.{2.try3.{4.if(window!=parent)5.{6.vara=parent.document.getElementsByTagName(IFRAME);7.//返回一个有特定标签名称(iframe)的子元素列表,是数组对象。8.for(vari=0;i<a.length;i++)9.{10.if(a[i].contentWindow==window)//contentWindow属性是指指定的frame或者iframe所在的window对象11.{12.13.varh1=0,h2=0,d=document,dd=d.documentElement;14.a[i].parentNode.style.height=a[i].offsetHeight+px;15.//parentNode属性:传回目前节点的父节点.16.//offserHeaight属性:表示课件高度17.a[i].style.height=10px;18.19.if(dd&&dd.scrollHeight)h1=dd.scrollHeight;//scrollHeight属性:网页正文全文高20.if(d.body)h2=d.body.scrollHeight;21.varh=Math.max(h1,h2);//取得最大值22.23.if(document.all){h+=0;}24.if(window.opera){h+=1;}//修正在opera浏览器25.a[i].style.height=a[i].parentNode.style.height=h+px;26.}27.}28.}29.}30.catch(ex){}31.}32.if(window.attachEvent)33.{34.window.attachEvent(onload,iframeAutoFit);35.//页面加载完后执行LoadImg函数36.}37.elseif(window.addEventListener)//兼容ff38.{39.window.addEventListener('load',iframeAutoFit,false);40.}如何实现iframe(嵌入式帧)框架的自适应高度好几次看到有人提问问到如何实现iframe的自适应高度,能够随着页面的长度自动的适应以免除页面和iframe同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。源代码如下:以下是代码片段:scripttype=text/javascript//**iframe自动适应页面**////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔.例如:[myframe1,myframe2],可以只有一个窗体,则不用逗号。//定义iframe的IDvariframeids=[test]//如果用户的浏览器不支持iframe是否将iframe隐藏yes表示隐藏,no表示不隐藏variframehide=yesfunctiondyniframesize(){vardyniframe=newArray()for(i=0;iiframeids.length;i++){if(document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length]=document.getElementById(iframeids[i]);if(dyniframe[i]&&!window.opera){dyniframe[i].style.display=blockif(dyniframe[i].contentDocument&&dyniframe[i].contentDocument.body.offsetHeight)//如果用户的浏览器是NetScapedyniframe[i].height=dyniframe[i].contentDocument.body.offsetHeight;elseif(dyniframe[i].Document&&dyniframe[i].Document.body.scrollHeight)//如果用户的浏览器是IEdyniframe[i].height=dyniframe[i].Document.body.scrollHeight;}}//根据设定的参数来处理不支持iframe的浏览器的显示问题if((document.all||document.getElementById)&&iframehide==no){vartempobj=document.all?document.all[iframeids[i]]:document.getElementById(iframeids[i])tempobj.style.display=block}}}if(window.addEventListener)window.addEventListener(load,dyniframesize,false)elseif(window.attachEvent)window.attachEvent(onload,dyniframesize)elsewindow.onload=dyniframesize/script://hi.baidu.com/hailangxin/blog/item/782f30dfb7db4f176327985b.html/cmtid/b8de8044e08c8384b2b7dca6
本文标题:Iframe框架高度自适应的实现
链接地址:https://www.777doc.com/doc-2878490 .html