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

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

时间: 2024-12-02 09:56:41

用javascript动态调整iframe高度的代码_javascript技巧的相关文章

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

当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体.这时候你会设置 scrolling="no" 属性.但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住.这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度.如果需要调

用javascript动态调整iframe高度

javascript|动态 当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体.这时候你会设置 scrolling="no" 属性.但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住.这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整i

JavaScript动态调整TextArea高度的代码_表单特效

核心代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function adjustObjHeight(obj, defaultHeight) { if(obj.scrollHeight > defaultHeight) { obj.style.height = obj.scrollHeight + 'px'; } else { obj.style.height

JSP中使用JavaScript动态插入删除输入框实现代码_javascript技巧

JavaScript代码: 复制代码 代码如下: <script language="javascript"> function addrows(){ var len = optionlist.rows.length; //得到table的行数 var obj = optionlist.insertRow(len);//在最后一行插入 /**插入第一列**/ obj.insertCell(0); obj.cells(0).innerHTML="选项" +

javascript 动态修改样式和层叠样式表代码_javascript技巧

W3C DOM2样式规则 ========================================================== CSSStyleSheet对象 CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表. CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条

javaScript 动态访问JSon元素示例代码_javascript技巧

复制代码 代码如下: $(document).ready(function () { var obj = {Name: 'Allen', Age: '30'}; for (var o in obj) { var a = console.log(o); // Name ,Age var a = console.log(obj[o]); //Allen,30 } }); </script>

用javascript动态调整iframe的高度

javascript|动态 关键字: javascript, iframe, 高度, firefox 当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体.这时候你会设置 scrolling="no" 属性.但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住.这里我提供

javascript 动态调整图片尺寸实现代码_图象特效

我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题.这种方法好处是简单,但坏处是会破坏某些细节的效果. 如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分.这样做可能会是一些内容突然截断,被隐藏了,很对不起观众. 通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性.IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari

JavaScript实现上下浮动的窗口效果代码_javascript技巧

本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win