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

2016-02-19 10:08 10 1 收藏

下面是个用javascript动态调整iframe高度的代码教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

当你在页面上使用了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

来源:http://www.tulaoshi.com/n/20160219/1593544.html

延伸阅读
标签: Web开发
Iframe src="example.htm" width="300" heitht="100"/IFRAME example.htm 是被嵌入的页面,标签 IFRAME 还有一些可用的参数设置如下: marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth="20",单位是 pix,下同。 marginheight:网页中内容在表格顶部预留的高度; hspace:网页右上角的的横坐标; vsp...
标签: Web开发
htmlhead meta http-equiv="Content-Type" content="text/html; charset=gb2312" meta name="GENERATOR" content="Microsoft FrontPage 4.0" meta name="ProgId" content="FrontPage.Editor.Document" titleNew Page 1/title /head body IFRAME id="test" name="...
标签: Web开发
在控制台中输入  db.drawCircle([50,50],20,"black");  db.drawLine([5,5],[36,44],"red");  可以看到效果  代码如下: body style="margin:0px;"  /body  script      function DrawingBoard(width,height,size)      {   &nb...
标签: Web开发
Untitled Document [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
title标题/title input type="button" name="Submit" onClick='copyToClipBoard()' value="复制专题地址,传给QQ/MSN上的好友"  script language="javascript"    function copyToClipBoard(){     var clipBoardContent="";     clipBoa...

经验教程

73

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部