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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
Display SQL Server Version Information
2007/06/21 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
房地产项目策划书
2014/02/05 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
怎样写辞职信
2015/02/27 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript