Heim > Web-Frontend > js-Tutorial > 如何实现iframe(嵌入式帧)的自适应高度_javascript技巧

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

WBOY
Freigeben: 2016-05-16 19:27:31
Original
1013 Leute haben es durchsucht

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。不敢独享,大家要是觉得有用,欢迎使用

源代码如下

复制代码 代码如下:

<script> <BR> //** iframe自动适应页面 **// <br><br> //输入你希望根据页面高度自动调整高度的iframe的名称的列表 <BR> //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 <br><br> //定义iframe的ID <BR> var iframeids=["test"] <br><br> //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 <BR> var iframehide="yes" <br><br> function dyniframesize() <BR> { <BR> var dyniframe=new Array() <BR> for (i=0; i<iframeids.length; i++) <BR> { <BR> if (document.getElementById) <BR> { <BR> //自动调整iframe高度 <BR> dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); <BR> if (dyniframe[i] && !window.opera) <BR> { <BR> dyniframe[i].style.display="block" <BR> if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape <BR> dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; <BR> else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE <BR> dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; <BR> } <BR> } <BR> //根据设定的参数来处理不支持iframe的浏览器的显示问题 <BR> if ((document.all || document.getElementById) && iframehide=="no") <BR> { <BR> var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]) <BR> tempobj.style.display="block" <BR> } <BR> } <BR> } <br><br> if (window.addEventListener) <BR> window.addEventListener("load", dyniframesize, false) <BR> else if (window.attachEvent) <BR> window.attachEvent("onload", dyniframesize) <BR> else <BR> window.onload=dyniframesize <BR></script>


使用的时候只要贴在里面就可以了
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage