`
daoyongyu
  • 浏览: 123144 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

在iframe中使用js代码实现自动设置栽入的页面的高度

    博客分类:
  • HTML
阅读更多
http://blog.csdn.net/wumingwei_123/archive/2008/07/08/2624477.aspx

以前在项目中经常遇到 使用iframe的是时候子页的高度始终调整不好
为此很浪费时间 在网上搜索了哈 部分功能有 于是作了个修改
代码如下:
<script type="text/javascript">
//自动调整iframe框架的方法 
function iframeAuto() { 
 try { 
    if(window!=parent) {
             //定位需要调整的frame框架(在父级窗口中查找) 
             var a = parent.document.getElementsByTagName("IFRAME"); 
         for(var i=0; i<a.length; i++) { 
	     if(a[i].contentWindow==window){ 
                  var h1=0, h2=0; 
                  a[i].parentNode.style.height = a[i].offsetHeight+"px";
                  a[i].style.height = "10px";   
                  //首先设置高度为10px,后面会修改 
                 if(document.documentElement&&
                      document.documentElement.scrollHeight){ 
                       h1=document.documentElement.scrollHeight; 
                    } 
                 if(document.body) 
                     h2=document.body.scrollHeight;
                 var h=Math.max(h1, h2);      
                 //取两者中的最大值 
                 if(document.all) {h += 4;} 
                 if(window.opera) {h += 1;} 
                 //调整框架的大小 
                 if(h>540) {
                   a[i].style.height=a[i].parentNode.style.height=h +"px"; 
                 } else {
                   a[i].style.height=a[i].parentNode.style.height= 540+"px";
                 } 
                 //这个地方可以根据实际的情况进行修改 
               }//end if 
            }//end for
        }//end if
    } catch (ex)
    {} 
  } //end function
    //事件绑定的方法,支持IE5以上版本 
    if(window.attachEvent)
       { 
          window.attachEvent("onload", iframeAuto); 
       } else if(window.addEventListener) { 
          window.addEventListener('load', iframeAuto, false); 
       } //--> 

</script>

里面大部分的代码都已经注释了 我想应该很详细了
希望对大家有帮助 特别说明 这个写成文件后可以在多iframe的页面使用 互不干扰
分享到:
评论

相关推荐

    iframe 自适高度 JS控制代码实现

    iframe 自动调节高度 ,而且不需要滚动条的功能总结 &lt;!--自动调节高度 ,而且不需要滚动条的功能--&gt; &lt;!-- 以下处理自动调节后页面 从新布局后 内容被覆盖的问题 --&gt; 个人总结

    iframe高度自适应代码及演示页面

    iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js

    动态的改变IFrame的高度实现IFrame自动伸展适应高度

    动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...

    javascript动态的改变IFrame的高度实现自动伸展

    动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然 后在主页面进行设置来实现。 代码如下,可复制。另外,

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    程序天下:JavaScript实例自学手册

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    ExtAspNet_v2.3.2_dll

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    淘宝装修代码大全

     在Layer中再插Iframe 或 Object 设z-Index值  &lt;div z-Index:2&gt;&lt;object xxx&gt;&lt;/object&gt; # 前面  &lt;div z-Index:1&gt;&lt;object xxx&gt;&lt;/object&gt; # 后面  &lt;div id="Layer2"&gt; height=100% width=100...

    IBM WebSphere Portal门户开发笔记01

    64、JS自动检测IFRAME内容高度并自动设置为IFRAME高度 338 65、JS MOVETO设置屏幕滚动到最底端或者最顶端 339 66、JS OBJECT方式设置浏览器最大化与最小化 339 67、边框标签FIELDSET 339 68、按钮与A标签的DISABLED...

    xheditor-1.1.14

    如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    zDialog水晶蓝色的弹窗代码.rar

     无外部css文件,引用Dialog.js即可使用;  对iframe下的应用作了充分考虑,适合复杂的系统应用;  Dialog显示的内容(三种):1、指向一个URL的iframe窗口;2、页面内隐藏的元素中的html内容;3、直接输出一段...

    artDialog_Demo

    7、 锁屏的时候改用js屏蔽页面滚动功能,取消原来CSS隐藏滚动条,防止页面偏移 8、 给确定按钮增加Ctrl + Enter快捷键,锁屏的时候支持tab与方向键切换按钮焦点 9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在...

    xheditor v1.0.0 rc2 build 100401

    Word:实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,但是却不丢失任何细节效果。 UBB:提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    2) 修正在检测自动播放文件格式时javascript代码出现的一些BUG。 2) 修正MenuConfig、configFolder属性在VS2005中设置属性值后会自动变为绝对路径的BUG。 3)修正在Opera浏览器下选择字体颜色功能无法取得...

    JavaScript Table行定位效果

    并在GetBgColor获取背景色程序中使用: while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...

    KODExplorer 芒果云-资源管理器

    ###ver2.61(2014.7.12)... - 支持代码自动补全(基于文档、或自定义的代码快照) - 快速预览功能 - 优化文件保存完美解决。编码自动识别转换。(字符串转义问题。1&#'[{'"+~%25\\\\ ////) - 文件编辑,添加收藏夹 -...

Global site tag (gtag.js) - Google Analytics