iframe自动适应高度,iframe自适应宽度

iframe自动适应高度,iframe自适应宽度,iframe自适应高度的多种方法方法小结

第一种方法:代码简单,兼容性还可以,大家可以先测试下。

重要提示:您必须在src=中填写的网址必须与此页面在同一个站点上,否则,您将得到错误的消息,并显示“拒绝访问!”(其实这是因为Js的跨域问题导致拒绝访问。)我自己以前也遇到过这个问题。为了得到答案,我在网上搜索了一下,发现很多人也遇到过这个问题。现在分享解决方案。1.创建一个bottom.js的文件,然后输入下面的代码(只有两行)。复制代码代码如下:parent . document . all( frame ID name )。风格.Parent.document.all(框架ID名称)。style . width=document . body . scroll width;这里的框架ID名称是Iframe的ID,比如复制代码如下:Iframe ID= frame ID name name= left frame border=0 scrolling=no src= XXX . ASP width= 100% /Iframe 2、将复制代码添加到你的网站中所有包含的文件如下:script language= JavaScript src= bottom . js //script 3、好了,今天到此为止!在WINXP和IE6下测试。很简单!实现iframe的自适应高度实现iframe的自适应高度,可以随着页面的长度自动适配,避免页面和iframe同时出现滚动条的现象。复制代码如下:script type= text/JavaScript /* * iframe自动适应页面* *///输入你想要根据页面高度自动调整高度的iframe的名称列表//用逗号分隔每个iframe的ID。比如:[myframe1 , myframe2],只能有一种形式,不能有逗号。//iframe定义的id var iframeids=[ test ]//如果用户的浏览器不支持iframe,是否隐藏iframe yes表示隐藏,no表示不隐藏var iframe= yes 函数dyniframe size(){ var dyniframe=new array()for(I=0;ii frame ids . length;I){ if(document . getelementbyid){//自动调整iframe Dyniframe[Dyniframe . length]=document . getelementbyid(iframeids)的高度;if (dyniframe!window . opera){ dyniframe . style . display= block If(dyniframe . content document dyniframe . content document . body . offset height)//如果用户的浏览器是Netscape dyniframe . height=dyniframe . content document . body . offset height;Else if (dyniframe。文档dyniframe。document . body . scroll height)//如果用户的浏览器是iedyniframe . height=dyniframe . document . body . scroll height;} }//根据设置的参数处理不支持iframe的浏览器的显示问题if((document . all | | document . getelementbyid)iframe== no ){ vartempobj=document . all?document . all[iframeids]:document . getelementbyid(iframeids)temp obj . style . display= block } } } if(window . addevent listener)window . addevent listener( load ,dyniframesize,false)else if(window . attach event( onl oad ,dyn frame Size)else window . onl oad=dyn frame Size/script

经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。

我在工作中遇到了iframe与所包含内容的高度自适应的问题,之前在网上看到过类似问题的解决方案,于是搜索了一下,找到了一个比较完整的兼容浏览器的解决方案,省得自己写了。虽然不用自己写,但是思路要清晰。基本上就是获取iframe的属性src指定的文档中包含的内容的高度,然后用它来设置iframe本身的高度。加载iframe所在的页面时,会自动设置页面中所有需要自适应高度的iframe,省时省力。如果确定页面中所有的iframe都需要自适应高度,可以直接把iframe数组拿到代码中,甚至不需要自己写ID。完成程序。(代码贴出:)复制代码如下:script language=javascript //输入你想要根据页面高度自动调整高度的iframe的名称列表//用逗号分隔每个iframe的ID。比如:[myframe1 , myframe2],可以只有一种形式,但是不要用逗号。

//定义内联框架的ID var iframeids=[ test ];//如果用户的浏览器不支持内联框架是否将内联框架隐藏是表示隐藏,不表示不隐藏var iframe hide= yes function dyniframesize(){ var dyniframe=new Array()for(I=0;ii帧id。长度;I){ if(文档。getelementbyid){//自动调整内联框架高度dyniframe[dyniframe。长度]=文档。getelementbyid(iframeids[I]);if (dyniframe[i]!窗户。opera){ dyniframe[I]。风格。display= blockif (dyniframe[i].内容文档dyniframe[I]。内容文档。身体。偏移高度)//如果用户的浏览器是网景动态框架[我].height=dyniframe[I]。内容文档。身体。偏移高度;else if (dyniframe[i].文档dyniframe[I]。文档。身体。滚动高度)//如果用户的浏览器是IE dyniframe[i].height=dyniframe[I]。文档。身体。滚动高度;} } //根据设定的参数来处理不支持内联框架的浏览器的显示问题如果((文档。所有| |文档。getelementbyid)iframe hide== no ){ var temp obj=document。全部?文档。all[iframeids[I]]:document。getelementbyid(iframeids[I]);临时对象。风格。display= block} } } if(窗口。addevent listener)窗口。addevent侦听器( load ,dyniframesize,false);else if(窗口。附加事件)窗口。附加事件(“onload”,dyniframesize);else窗口。onload=dyniframesize/脚本

网上有人改进了方法,解决了iframe包含的文档内容高度动态变化时,自动调整iframe高度的问题。原理是扫描iframe的内容高度,在iframe所在的页面上改变iframe本身的高度。这种方法看似解决了问题,但是否会影响页面速度和系统资源占用就不好说了。感觉方法有点偏执,应该有更好的解决办法。

下面这个兼容性更好一些

复制代码如下:函数iframe autofit(iframe obj){ settimeout(function(){ if(!iframeObj)返回;iframeObj.height=(iframeObj。文档?iframeObj。document . body . scroll height:iframe obj . content document . body . offsetheight);},200)}怎么用?大家给需要自适应的iframe加一个id,然后js执行。

iframe自动适应高度,iframe自适应宽度