Ifram 内页面高度自适应 兼容FF IE

最新推荐文章于 2017-04-25 10:40:38 发布
最新推荐文章于 2017-04-25 10:40:38 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS javascript 用过的 javascript 文章标签： iframe function ie c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mathew3625/article/details/2766240
本文介绍了一种使IFrame自适应其内容高度的方法，并针对不同浏览器进行了优化，特别是解决了Firefox浏览器中无法正确获取body高度的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

< i frame  id=rightframe name=rightframe src="admin_right.aspx" marginWidth="10" frameSpacing="0" marginHeight="0" frameBorder="0" scrolling="no" align="center" width=785 height="1" frameborder="no" onload='this.height="500px";this.height=rightframe.document.body.scrollHeight;'   ></ i frame>

 

注:onload='this.height="500px"; 这个是为了避免有的页面很长,切到短页面,还是很长这个问题

写成JS函数形式

 

<script type="text/javascript">
function reiframe(){
var iframe=document.getElementById("dlok");
try{
var bheight=iframe.contentWindow.document.body.scrollHeight;
var dheight=iframe.contentWindow.document.documentElement.scrollHeight;
var height=Math.max(bheight,dheight);
iframe.height=height;
}catch(ex){}
}
window.setInterval("reiframe()",200);
</script>

 

 

上面的在w3c就不能正确用了,IE正确,但ff会显示不出来因为它不认识body.scrollHeight

它只认识documentElement.scrollHeight;

所以改成

< i frame  id=rightframe name=rightframe src="admin_right.aspx" marginWidth="10" frameSpacing="0" marginHeight="0" frameBorder="0" scrolling="no" align="center" width=785 height="1" frameborder="no" onload='this.height="500px";this.height=rightframe.document.documentElement.scrollHeight;'   ></ i frame>

通过js动态设置 让ifram的高度自动适应被引入页面的高度
qq_38353578的博客
04-22 996
function setIframeHeight(iframe) { var fr=$("#iframe"); fr.get(0).height=0; if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (i
ifram自适应高度兼容性非常强
02-25
ifram自适应高度兼容性非常强，本人经过这个浏览器的测试都OK
iframe 自适应高度
weixin_33979203的博客
06-04 117
// JScript 文件//var iframeids=["test_iframeid"] var iframehide="yes" function dyniframesize()  {  var dyniframe=new Array()  for (i=0; i&lt;iframeids.length; i++)  {   if (document.getElementById)   { ...
使用iframe内嵌网页的时候，如何做到内嵌网页的高度自适应
DavidLog的博客
04-25 2万+
在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用： 单个iframe 高度自适应： 起作用的是这句：onload="this.height=iFrame1.document.body.scrollHeight" 多层嵌套iframe 高度自适应： A页面的if
iframe 根据内容自适应高度-终极解决方案
不啦草的草原
07-05 6万+
第一中方法： 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementById("iframe").height=document.body.scrollHeight; 第二中方法： 在主页面 iframe onLoad 时间里面写 functi
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
10-29
本文将深入探讨如何使用JavaScript实现一个真正兼容IE、Firefox（FF）、Opera的`iframe`高度自适应解决方案。 首先，`iframe`高度自适应的主要目的是确保内嵌页面的完整内容可以在不显示滚动条的情况下完全展示。...
JQuery自适应IFrame高度（支持嵌套 兼容IE,ff,safafi,chrome）
10-28
为了解决这个问题，我们可以利用JavaScript库jQuery来实现IFrame的高度自适应，确保无论内容如何变化，IFrame都能够自动调整高度以适应其内容，同时兼容不同的浏览器，如IE、Firefox、Safari和Chrome。 首先，我们...
JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
04-13
通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、Firefox、Safari和Chrome）中的显示一致性，无论iframe内嵌的页面有多复杂。 首先，我们需要理解iframe的基本概念。IFrame，即...
iframe 自适应高度[在IE6 IE7 FF下测试通过]
12-03
//iframe自适应高度[在IE6 IE7下测试通过] function reSetIframe(){ var iframe = document.getElementById("iframeId"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = ...
iframe框架中的页面刷新
masterShaw的博客
09-26 3万+
1，reload 方法，该方法强迫浏览器刷新当前页面。 　　语法：location.reload([bForceGet]) 　　参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")  代码如下   window.locat
iframe加载页面，onload函数不执行的问题
oarsman的专栏
04-07 2万+
前一阵子，做了个小工具，其中用到了一个隐藏的iframe结果出现了一个奇怪的现象，iframe加载的页面本来有一个onload来进行初始化的，结果这个onload函数指定的初始化代码并没有被执行。同时使用document.getElementById去获取iframe加载的页面中的对象的时候，也得不到相应的信息。后来仔细看了一下代码，发现是隐藏iframe的方法的问题。如果要避免上面的问题，则不能
真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
热门推荐
巴黎的妖
05-19 22万+
今天有朋友问到我关于“iframe自适应高度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。期间遇到几个问题，要么是高度自适应了，但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小，或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度不准确，那么就达不到想要的效果了。 为什么需要使用iframe自适应高度呢？其实就是为
iframe 高度设置、iframe 自适应高度方法总结
巴黎的妖
05-19 2万+
所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。 如果iframe的高度没有确定，那将
原创,真正解决iframe高度自适应的问题.兼容各浏览器
07-09 605
在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两三篇文章被转载来转载去.真正解决问题的没有.那我今天就不和他们同流合污了,经过我的深入研究和各种尝试最终找到了解决办法,分享给大家. 解决高度自适应的问题有两种办法： 方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得...
ifram 自适应框架宽度
隼之
12-31 1627
parent.document.all("框架ID名").style.height=document.body.scrollHeight;parent.document.all("框架ID名").style.width=document.body.scrollWidth;
phpcms评论框iframe无法自适应问题
weixin_30640291的博客
10-29 105
问题背景： 之前用友言的时候改过网站的ip地址，改成127开头的了。但是协同开发的时候别人用的还是localhost。 结果在用评论的时候iframe死活不能自适应，看了一下源代码v9本身已经写过iframe自适应的方法，而且在之前那个项目中一点儿问题都没有。 那么问题来了，到底咋回事？ 问题线索： 在firebug控制台中无意发现报了一个错，说js.html找不到，而js.html的地...