用javascript动态调整iframe高度的代码

义兄的天空

义兄的天空

2016-02-19 10:08

下面是个用javascript动态调整iframe高度的代码教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。

     首先,在你的主页面上必须包含以下这段javascript代码:
script language="Javascript"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion=0.1? 16 : 0 

function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
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+FFextraHeight; 
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
/script
然后对于主页面用到iframe的地方添加代码:
iframe id="myTestFrameID" 
onload="javascript:{dyniframesize('myTestFrameID');}" 
marginwidth=0 marginheight=0 frameborder=0 
scrolling=no src="/myiframesrc.php" 
width=200 height=100/iframe
展开更多 50%)
分享

猜你喜欢

用javascript动态调整iframe高度的代码

Web开发
用javascript动态调整iframe高度的代码

用javascript动态调整iframe高度的方法

Web开发
用javascript动态调整iframe高度的方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

js实现iframe动态调整高度的代码

Web开发
js实现iframe动态调整高度的代码

用javascript控制iframe滚动的代码

Web开发
用javascript控制iframe滚动的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

通过ifame指向的页面高度调整iframe的高度

Web开发
通过ifame指向的页面高度调整iframe的高度

jQuery解决iframe高度自适应代码

Web开发
jQuery解决iframe高度自适应代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何解决attachEvent函数时this指向被绑定的元素的问题?

如何解决attachEvent函数时this指向被绑定的元素的问题?

java开发之内部类的用法

java开发之内部类的用法
下拉加载更多内容 ↓