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 相关文章推荐
jquery dialog键盘事件代码
Aug 01 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
Angular实现form自动布局
Jan 28 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
解决pycharm双击但是无法打开的情况
Oct 31 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
利用PHP创建动态图像
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
django 信号调度机制详解
2019/07/19 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python实现数字炸弹游戏
2020/07/17 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
会计学生自我鉴定
2014/02/06 职场文书
旷课检讨书500字
2014/10/14 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2019年教师入党申请书
2019/06/27 职场文书
导游词之崇武古城
2019/10/07 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
灵能百分百第三季什么时候来?
2022/03/15 日漫
Nginx配置使用详解
2022/07/07 Servers