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 相关文章推荐
JS date对象的减法处理实现代码
Dec 28 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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使用curl存储cookie的示例
2014/03/31 PHP
php include类文件超时问题处理
2015/02/06 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Django web框架使用url path name详解
2019/04/29 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
活动志愿者自荐信
2014/01/27 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
大三学习计划书范文
2014/05/02 职场文书
员工趣味活动方案
2014/08/27 职场文书
交通处罚决定书
2015/06/24 职场文书
酒店温馨提示语
2015/07/14 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python