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 this调用规则说明
Mar 08 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
用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
人族 TERRAN 概述
2020/03/14 星际争霸
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
python中logging库的使用总结
2017/10/18 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python如何实时获取tcpdump输出
2020/09/16 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
什么是网络协议
2016/04/07 面试题
大学生活学习的自我评价
2013/12/03 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
协议书模板
2014/04/23 职场文书
促销活动总结范文
2014/04/30 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
中职招生先进个人材料
2014/08/31 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
《牧场之国》教学反思
2016/02/22 职场文书