网站首页 | 工作总结 | 工作报告 | 工作计划 | 演讲稿 | 自我鉴定 | 思想汇报 | 心得体会 | 书信范文 | 职场知识 | 作文大全 | 述职报告 | 读后感
一起看范文网

iframe自适应高度

第一篇:iframe自适应高度

iframe 自适应高度(简单好用)2010年12月23日 星期四 下午 08:02 function SetWinHeight(obj){ var win=obj; if (document.getElementById){ if (win && !window.opera){ if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } <iframe src="center.jsp" allowtransparency="true" name="right" width="100%" height="500" scrolling="no" frameborder="0" id="window3" border="0" oresize="noresize" framespacing="0" onload="Javascript:SetWinHeight(this)"></iframe> //--------------------------- //多层iframe嵌套时,里层的iframe自适应高度的同时,控制外层iframe的高度(应该可以达到自适应,本例将外层iframe的高度写死) //注意,获取外层iframe的方法parent.document.getElementById().height='450px'; //注意,附值高度时,加“px”像素标记。 <script type="text/javascript"> function SetWinHeight(obj){ var win=obj; if (document.getElementById){ if (win && !window.opera){ if (win.contentDocument && win.contentDocument.body.offsetHeight) { win.height = win.contentDocument.body.offsetHeight; parent.document.getElementById("window3").hieght = win.height; }else if(win.Document && win.Document.body.scrollHeight){ win.height = win.Document.body.scrollHeight; win.style.height = win.height + "px"; //测试时出现问题:ie中,style的高度没改,属性改了,框架高度没变,用下面的方法改动样式的高度,问题解决了。 //parent.document.getElementById("window3").height='450px'; } } } } function openUrl(url){ $("#tcInfos").show(); $("#window4").attr("src",url);//jquery iframe跳转 } </script>

第一篇:iframe自适应高度

简单一点给每个 iframe 外面套个 div 就可以了 <div><iframe id="dingbu" name="dingbu" width="100%" onload="this.height=dingbu.document.body.scrollHeight" frameborder="0" src="spms/01.shtml"></iframe></div> 第一种方法:代码简单,兼容性还可以,大家可以先测试下。

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

代码如下

复制代码 代码如下 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } } 最后, 属性,当然了, 最后,加入 iframe,不能丢掉 onload 属性,当然了,id 也必须也函数中的 win 匹 不能丢掉 配 代码如下

复制代码 代码如下 <iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> 这么的这种也是跟上面的解决方法类似的代码 自适应高度 经典代码 iFrame 自适应高度,在 IE6/IE7/IE8/Firefox/Opera/Chrome/Safari 通过 测试。

测试。

HTML 代码

代码

代码如下

复制代码 代码如下 <iframe src="/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript 代码

代码

<script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document

ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script> 下面这个兼容性更好一些 代码如下

复制代码 代码如下 <script language="javascript" type="text/javascript"> function dyniframesize(down) { var pTar = null; if (document.getElementById){ pTar = document.getElementById(down); } else{ eval('pTar = ' + down + ';'); } if (pTar && !window.opera){ //begin resizing iframe pTar.style.display="block" if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ //ns6 syntax pTar.height = pTar.contentDocument.body.offsetHeight +20; pTar.width = pTar.contentDocument.body.scrollWidth+20; } else if (pTar.Document && pTar.Document.body.scrollHeight){ //ie5+ syntax pTar.height = pTar.Document.body.scrollHeight; pTar.width = pTar.Document.body.scrollWidth; } } } </script> <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> </iframe> 解决方案(超简单) 另一种情况的 iframe 解决方案(超简单) 重要提示

中你必须填写的网页地址, 重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否 中你必须填写的网页地址 一定要和本页面在同一个站点上, 会抱错, 拒绝访问! 实际上这是因为 的跨域问题导致拒绝访问的) 则,会抱错,说“拒绝访问! (实际上这是因为 Js 的跨域问题导致拒绝访问的 ” 之前自己也碰到过这个问题 为了得到答案去网上搜索, 过这个问题, 之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到 了这样的问题, 了这样的问题,现在就把解决方法共享一下 1、建立一个 bottom.js 的文件,然后输入下面的代码(只有两行哦) 的文件,然后输入下面的代码(只有两行哦) 、 代码如下

复制代码 代码如下 parent.document.all("框架 ID 名").style.height=document.body.scrollHeight; 框架 parent.document.all("框架 ID 名").style.width=document.body.scrollWidth; 框架 这里的 框架 ID 名 就是 Iframe 的 ID,比如

,比如

代码如下

复制代码 代码如下 <IFRAME id="框架 ID 名" name="left" frameBorder=0 scrolling=no src="XXX.asp" 框架 width="100%"></IFRAME> 2、给你网站里所有的被包含文件里面每个都加入 、 代码如下

复制代码 代码如下 <script language = "JavaScript" src = "bottom.js"/></script> 3、OK,收工! 、 ,收工! 下面测试通过。很简单吧! 在 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 iframehide="yes" function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整 iframe 高度 自动调整 dyniframe[dyniframe.length] = document.getElementById(iframeids); if (dyniframe && !window.opera) { dyniframe.style.display="block" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是 NetScape 如果用户的浏览器是 dyniframe.height = dyniframe.contentDocument.body.offsetHeight; else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用 如果用 户的浏览器是 IE dyniframe.height = dyniframe.Document.body.scrollHeight; } } //根据设定的参数来处理不支持 iframe 的浏览器的显示问题 根据设定的参数来处理不支持 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids]

document.getElementById(iframeids) tempobj.style.display="block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload=dyniframesize </script> 自适应

第三中方法批量 iframe 自适应

随所含内容自适应高度的问题, 工作中遇到 iframe 随所含内容自适应高度的问题,以前在网上看到过类似问题 的解决方法,于是搜索一下, 的解决方法,于是搜索一下,找到了一个比较完整的能够兼容浏览器的解决方 省得自己写了。

法,省得自己写了。

虽然不用自己写,思路还是要明白, 虽然不用自己写,思路还是要明白,基本上就是取得 iframe 属性 src 所指定的包 含文档中内容的高度, 自身的高度, 含文档中内容的高度,然后用来设置 iframe 自身的高度,在 iframe 所在页面载 进行自动设置,省时省力, 入时对页面中的所有需要自适应高度的 iframe 进行自动设置,省时省力,如果 都需要自适应高度, 数组给代码, 确定页面中全部 iframe 都需要自适应高度,直接取得 iframe 数组给代码,就连 ID 都不用自己写了,完成程序搞定。

代码贴上来

都不用自己写了,完成程序搞定。

代码贴上来

(代码贴上来 ) ( 代码如下

复制代码 代码如下 <script language="javascript"> //输入你希望根据页面高度自动调整高度的 iframe 的名称的列表 输入你希望根据页面高度自动调整高度的 //用逗号把每个 iframe 的 ID 分隔 例如 ["myframe1", "myframe2"],可以只有 分隔. 例如

用逗号把每个 , 一个窗体 则不用逗号。

窗体, 一个窗体,则不用逗号。

//定义 iframe 的 ID 定义 var iframeids=["test"]; //如果用户的浏览器不支持 iframe 是否将 iframe 隐藏 yes 表示隐藏, 表示不 表示隐藏, no 如果用户的浏览器不支持 隐藏 var iframehide="yes"; function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整 iframe 高度 自动调整 自动调 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display="block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) // 如 果 用 户 的 浏 览 器 是 NetScape dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如 如 果用户的浏览器是 IE dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } //根据设定的参数来处理不支持 iframe 的浏览器的显示问题 根据设定的参数来处理不支持 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids[i]] document.getElementById(iframeids[i]); tempobj.style.display="block"; } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false); else if (window.attachEvent) window.attachEvent("onload", dyniframesize); else window.onload=dyniframesize; </script> : 网上有人改进了方法, 网上有人改进了方法,解决了当 iframe 所包含文档内容高度动态变化时自动调 高度的问题, 整 iframe 高度的问题,原理是在 iframe 所在页面不断扫描 iframe 包含文档的内 自身高度,这种方法貌似解决了问题, 容高度并改变 iframe 自身高度,这种方法貌似解决了问题,但是对页面速度和 系统资源占用是否有影响还很难说,感觉方法有些偏执, 系统资源占用是否有影响还很难说,感觉方法有些偏执,应该有更好的解决方 法。

第四种方法, 第四种方法,只针对知道的 iframe 的 ID 调用 不推荐 代码如下

复制代码 代码如下 function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollH eight:iframeObj.contentDocument.body.offsetHeight);},200) } 使用方法呢, 使用方法呢,大家在需要自适应的 iframe 上加个 id,然后 js 执行就可以了 , 详细出处参考

详细出处参考:http://www.jb51.net/article/15780.htm

第一篇:iframe自适应高度

你的意思是不是"怎么能让iframe页内框架的大小根据在框架内显示网页内容,如文字内容等的大小而定?" 如果是这样的话 有几段代码可以帮你

iframe自适应高度和宽度 方法1 将myframe换成 自己iframe的name即可。

自适应高度高度 <iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe> 自适应高度宽度 <iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe> ===============================================================方法2,用javascript动态调整iframe的高度

这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。

首先,在你的主页面上必须包含以下这段javascript代码

<script language="Javascript"> var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] //extra height in px to add to iframe in FireFox 1.0+ browser作文s var FFextraHeight=getFFVersion>=0.1? 16

0 function dyniframesize(iframename) { var pTar = null; if (document.getElementById){ pTar = document.getElementById(iframename); } else{ eval('pTar = ' + iframename + ';'); } if (pTar && !window.opera){ //begin resizing iframe pTar.style.display="block" if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ //ns6 syntax pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight; } else if (pTar.Document && pTar.Document.body.scrollHeight){ //ie5+ syntax pTar.height = pTar.Document.body.scrollHeight; } } } </script> 然后对于主页面用到iframe的地方添加代码

<iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}" marginwidth=0 marginheight=0 frameborder=0 scrolling=no src="xxx.htm" width=200 height=100></iframe>
iframe自适应高度》由(一起看范文网)整理提供,版权归原作者、原出处所有。
Copyright © 一起看范文网 All Rights Reserved.