用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"

赞 (0)

相关推荐

  • jQuery解决iframe高度自适应代码

    复制代码 代码如下: <script type="text/javascript"> <!-- $(     function()     {                          //iframe高度随内容自动调整         $('.main').load(          function()             {                 $(this).height($(this).contents().find("b

  • JavaScript设置IFrame高度自适应(兼容各主流浏览器)

    复制代码 代码如下: function SetIFrameHeight(down) { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/

  • js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    找到了下面这个js 复制代码 代码如下: function SetCwinHeight(obj) { var cwin=obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) cwin.height = cwin.contentDocument.body.offset

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

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

  • file模式访问网页时iframe高度自适应解决方案

    最近做到iframe的高度自适应这个问题,网上一搜好多解决方案,而总结起来也就那几种,我逐一尝试这些方案,最后发现在我的项目中都不起作用,后来发现自己做的网页是通过file方式访问的,将网页代码放到apache下通过http协议访问,在iframe加载的时候调用如下js方法: 复制代码 代码如下: <SPANstyle="FONT-FAMILY:KaiTi_GB2312;FONT-SIZE:18px">functionSetWinHeight(obj) { varwin=o

  • JQuery自适应IFrame高度（支持嵌套 兼容IE,ff,safafi,chrome）

    复制代码 代码如下: function adjustIFramesHeightOnLoad(iframe) { var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight); $(iframe).height(iframeHeight); } 失败的测试就不说

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

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

  • 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

  • JS动态修改iframe高度和宽度的方法

    本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

  • jQuery判断浏览器并动态调整select宽度的方法

    本文实例讲述了jQuery判断浏览器并动态调整select宽度的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • javascript 动态脚本添加的简单方法

    异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createScript方法用于创建一个script标签并添加到body标签中 2.createModule方法用于创建一个script脚本的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行script.text兼容IE添加js的脚本内容. <button id="demo">js文件</button> <button id=&quo

  • JavaScript动态修改背景颜色的方法

    本文实例讲述了JavaScript动态修改背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <title>Background Color Changer</title> <script language = JavaScript> <!-- function BG_yellow() { document.bgColor = 0xFFFF00 } function BG_thistle() { document.

  • jQuery获取与设置iframe高度的方法

    本文实例讲述了jQuery获取与设置iframe高度的方法.分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定. 1.首先获取到iframe中页面的高度: 复制代码 代码如下: var iframeHeight = $("#UpdateUserItem").contents().find("body").height(); 2.设置iframe的高度: $("#UpdateUserItem"

  • JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =

  • javascript动态生成树形菜单的方法

    本文实例讲述了javascript动态生成树形菜单的方法.分享给大家供大家参考,具体如下: //======================================== //Envrionment to hold Listeners //======================================== tv_listeners = new Array() ; function listener( type , handler ) { this.type = type ;

随机推荐