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中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 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读取IMAP邮件
2006/10/09 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
JavaScript中的私有成员
2006/09/18 Javascript
学习YUI.Ext 第二天
2007/03/10 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
七年级政治教学反思
2014/02/03 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
综合实践活动报告
2015/02/05 职场文书
金榜题名主持词
2015/07/02 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL