javascript应用:Iframe自适应其加载的内容高度


Posted in Javascript onApril 10, 2007

main.htm: 

<html>    
    <head>    
       <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'>    
       <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com'>    
       <title>iframe自适应加载的页面高度</title>    
    </head>        <body>  
        <iframe src="child.htm"></iframe>  
    </body>  
</html>

child.htm:
<html>  
<head>  
   <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'>  
   <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com'>  
   <title>iframe  自适应其加载的网页(多浏览器兼容)</title>  
   <script  language=javascript>
   function iframeAutoFit()
   {
      try
      {
         if(window!=parent)
         {
          var a = parent.document.getElementsByTagName("IFRAME");
            for(var i=0; i<a.length; i++) //author:meizz
            {
               if(a[i].contentWindow==window)
               {
                   var h = document.body.scrollHeight;
                   if(document.all) {h += 4;}
                   if(window.opera) {h += 1;}
                   a[i].style.height = h;
               }
            }
         }
      }
      catch (ex)
      {
         alert("脚本无法跨域操作!");
      }
   }
   if(document.attachEvent)  window.attachEvent("onload",  iframeAutoFit);  
   else  window.addEventListener('load',  iframeAutoFit,  false);  
   </script>  
</head>  
<body>  
   <div  style="width:  200;  height:  400;  background-color:  yellow">  
       iframe  自适应其加载的网页(多浏览器兼容)  
   </div>  
</body>  
</html>

Javascript 相关文章推荐
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
用javascript动态调整iframe高度的代码
Apr 10 #Javascript
Javascript下的keyCode键码值表
Apr 10 #Javascript
用javascript控制iframe滚动的代码
Apr 10 #Javascript
经常用到的JavasScript事件的翻译
Apr 09 #Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 #Javascript
Javascript中eval函数的使用方法与示例
Apr 09 #Javascript
给网站上的广告“加速”显示的方法
Apr 08 #Javascript
You might like
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP中的事务使用实例
2015/05/26 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
JS实现图片切换效果
2018/11/17 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python二维码生成识别实例详解
2019/07/16 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
小学毕业感言150字
2014/02/05 职场文书
五年级科学教学反思
2014/02/05 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
六一儿童节开幕词
2015/01/29 职场文书
实习生辞职信范文
2015/03/02 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
教务处教学工作总结
2015/08/10 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
世界十大狙击步枪排行榜
2022/03/20 杂记
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python