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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
jQuery使用方法
Feb 04 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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 $_FILES函数详解
2011/03/09 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
jQuery中each方法的使用详解
2018/03/18 jQuery
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
js隐式转换的知识实例讲解
2018/09/28 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
python操作xml文件示例
2014/04/07 Python
用python读写excel的方法
2014/11/18 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python提取页面内url列表的方法
2015/05/25 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
自我介绍演讲稿
2014/01/15 职场文书
参观考察邀请函范文
2014/01/29 职场文书
创先争优活动方案
2014/02/12 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
golang 实现并发求和
2021/05/08 Golang
python spilt()分隔字符串的实现示例
2021/05/21 Python