手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
摘要:找到了下面这个js复制代码代码如下:functionSetCwinHeight(obj){varcwin=obj;if(document.g...

找到了下面这个js

复制代码 代码如下:

function SetCwinHeight(obj)

{

var cwin=obj;

if (document.getElementById)

{

if (cwin && !window.opera)

{

if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)

cwin.height = cwin.contentDocument.body.offsetHeight + 20;

else if(cwin.Document && cwin.Document.body.scrollHeight)

cwin.height = cwin.Document.body.scrollHeight + 10;

}

}

}

然后……

进入了测试过程(调用很简单,先略过)

1.IE ---通过 但是高度还是有稍微的差距,很小,滚动条还在

2.FF --- 通过 与IE一样,有小差距

3.Opera --- 看那个JS的条件就知道,通不过的

但主流浏览器至少要通过这三项撒!!!

于是,还是Google

搜索 各浏览器在处理 document.scrollHeight 或者 offsetHeigth时的特殊现象

发现,Opera浏览器在处理iframe内容的时候,用的是contentWindow

而处理内容高度的时候,却与IE一致

从而,有了下面这段js

复制代码 代码如下:

<html>

<head>

<script>

function SetCwinHeight(obj)

{

var cwin=obj;

if (document.getElementById)

{

if (cwin && !window.opera)

{

if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)

cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS

else if(cwin.Document && cwin.Document.body.scrollHeight)

cwin.height = cwin.Document.body.scrollHeight + 10;//IE

}

else

{

if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)

cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera

}

}

}

</script>

</head>

<body>

<iframe src="20103622440.html" onload="SetCwinHeight(this);" width="600px">

</body>

</html>

这样一来,总算把这三个浏览器给适应了

做为程序员,还是要细心点

再测试一下

OK...3个浏览器均正常显示,也无iframe的纵向滚动条了

【js实现的真正的iframe高度自适应(兼容IE,FF,Opera)】相关文章:

js实现精美的图片跟随鼠标效果实例

如何实现iframe(嵌入式帧)的自适应高度

连接文字不停变色

快速判断某个值是否在select中的方法

javascript实现简单的省市区三级联动

js实现顶部可折叠的菜单工具栏效果实例

Javascript获取统一管理的提示语(message)

JVM性能优化,Java的伸缩性

javascript实现youku的视频代码自适应宽度

jQuery封装的tab选项卡插件分享

精品推荐
分类导航