管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

　　找到了下面这个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的纵向滚动条了

教程首页 更多教程