2012/9/27 20:14:49作者:佚名来源:网络
在学习CSS+DIV的过程中,我们经常会遇到各种问题,今天学无忧就教大家iframe的一点小技巧,iframe自适应高度的多种方法。下面小编将详细给大家说明iframe自适应高度的多种方法的具体内容:
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
第一种方法:代码简单,兼容性还可以,大家可以先测试下。
function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } }
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"> </iframe>
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
HTML代码:
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" > </iframe>
Javascript代码:
<script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames ["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script>
下面这个兼容性更好一些
<script language="javascript" type="text/javascript"> function dyniframesize(down) { var pTar = null; if (document.getElementById){ pTar = document.getElementById(down); } else{ eval('pTar = ' + down + ';'); } if (pTar && !window.opera){ //begin resizing iframe pTar.style.display="block" if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ //ns6 syntax pTar.height = pTar.contentDocument.body.offsetHeight +20; pTar.width = pTar.contentDocument.body.scrollWidth+20; } else if (pTar.Document && pTar.Document.body.scrollHeight){ //ie5+ syntax pTar.height = pTar.Document.body.scrollHeight; pTar.width = pTar.Document.body.scrollWidth; } } } </script> <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> </iframe>
另一种情况的iframe解决方案
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
1、建立一个bottom.js的文件,然后输入下面的代码
parent.document.all("框架ID名").style.height=document.body.scrollHeight; parent.document.all("框架ID名").style.width=document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID,比如:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"> </IFRAME>
2、给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "bottom.js"/></script>
3、在WINXP、IE6下面测试通过。很简单吧!
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
<script type="text/javascript"> //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 //定义iframe的ID var iframeids=["test"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 var iframehide="yes" function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids); if (dyniframe && !window.opera) { dyniframe.style.display="block" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe.height = dyniframe.contentDocument.body.offsetHeight; else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE dyniframe.height = dyniframe.Document.body.scrollHeight; } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display="block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload=dyniframesize </script>
第三种方法批量iframe自适应:
<script language="javascript"> //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 //定义iframe的ID var iframeids=["test"]; //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 var iframehide="yes"; function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display="block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); tempobj.style.display="block"; } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false); else if (window.attachEvent) window.attachEvent("onload", dyniframesize); else window.onload=dyniframesize; </script>
第四种方法,只针对知道的iframe的ID调用
function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj .height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj .contentDocument.body.offsetHeight);},200) }
标签: iframe
相关文章
ip雷达 v5.0.2绿色版
详情WinSCPv5.15.1绿色中文版
详情filezilla client v5.5
详情wireshark中文版 v3.4.9
详情Boson Netsimv10.8破解版
详情风行播放器 v3.0.6.106
详情爱奇艺客户端 v10.1.0.6636官方版
详情搜狐影音 v7.0.19.0官方版
详情乐视视频 v7.3.2.192
详情华数tv客户端PC版 v1.1.2.0
详情cbox央视影音 v5.1.2.1经典版
详情软媒收音机(魔方) v1.13
详情倾听网络收音机 v3.0.0.0
详情魅影流声全球网络收音机 v1.0.0.1
详情酷狗电台 v8.2.75
详情暴龙网络收音机 v2.5.1
详情克莉2v1.0中文版
详情冬日计划v1.2中文版
详情刺客信条英灵殿v1.0吾爱破解版
详情刺客信条英灵殿终极v1.0免安装破解版
详情动物森友会v1.10.0最新破解版
详情哈迪斯杀出地狱v1.37中文破解版
详情嗜血印中文豪华版v1.0豪华版破解版 附游戏攻略秘籍
详情城市战斗v1.0中文破解版
详情尼尔人工生命v1.0steam免费破解版
详情尼尔人工生命升级版v1.0PC破解版
详情尼尔人工生命升级版v1.2247中文破解版
详情层层恐惧2中文破解版v1.0绿色免安装版
详情往日不再v1.0 steam破解版
详情往日不再v1.0pc破解版
详情救赎之路v1.0中文破解版
详情斯盖尔女仆v1.0中文破解版
详情新盗墓笔记官方版v1.215.589730
详情无尽的拉格朗日无限金币钻石版v1.2.267172破解版
详情明日之后无限小太阳版v1.0.246安卓版
详情双生幻想vivo版v6.6.83安卓版
详情剑网1归来内购免费版v1.1.116安卓版
详情模拟城市我是市长国际版v0.69.21342.22832安卓版
详情迷你世界999999迷你币版v1.20.5破解版
详情王牌战争无限内购版v9.7安卓版
详情云上城之歌不氪金版v10.16安卓版
详情王铲铲的致富之路破解版v1.1.8安卓版
详情创造与魔法无限点券版v1.0.0505安卓版
详情狩猎使命九游版v1.6.6.000
详情魔镜物语变态版v2.1.4无限金币版
详情黑月手游免费版v2.2.0安卓版
详情曙光英雄v1.0.12.0.20无限钻石版
详情原始传奇无限元宝版v1.6.806内购破解版
详情