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作用域和作用域链
Oct 21 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
纯js实现动态时间显示
Sep 07 Javascript
JS实现商品筛选功能
Aug 19 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
vue中的router-view组件的使用教程
Oct 23 Javascript
JS实现购物车基本功能
Nov 08 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 正则表达式小结
2009/08/31 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
比较完整的微信开发php代码
2016/08/02 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
python pdb调试方法分享
2014/01/21 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python中字符串的修改及传参详解
2016/11/30 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
办公室前台岗位职责
2014/01/04 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
综合实践活动方案
2014/02/14 职场文书
小学生学习感言
2014/03/10 职场文书
北京奥运会主题口号
2014/06/13 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
解决Oracle数据库用户密码过期
2022/05/11 Oracle
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python