Heim  >  Artikel  >  Web-Frontend  >  js实现的真正的iframe高度自适应(兼容IE,FF,Opera)_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 18:33:08925Durchsuche

找到了下面这个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
复制代码 代码如下:



<script> <BR>function SetCwinHeight(obj) <BR>{ <BR>var cwin=obj; <BR>if (document.getElementById) <BR>{ <BR>if (cwin && !window.opera) <BR>{ <BR>if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) <BR>cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS <BR>else if(cwin.Document && cwin.Document.body.scrollHeight) <BR>cwin.height = cwin.Document.body.scrollHeight + 10;//IE <BR>} <BR>else <BR>{ <BR>if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight) <BR>cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera <BR>} <BR>} <BR>} <BR></script>



这样一来,总算把这三个浏览器给适应了
做为程序员,还是要细心点
再测试一下
OK...3个浏览器均正常显示,也无iframe的纵向滚动条了
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn