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使用post方法提交数据实例
Mar 25 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
Vue实现开关按钮拖拽效果
Sep 22 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中常用的转义函数
2014/02/28 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
自己的js工具 Event封装
2009/08/21 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
使用python实现滑动验证码功能
2019/08/05 Python
django自定义模板标签过程解析
2019/12/14 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python os模块在系统管理中的应用
2020/06/22 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
药学专业毕业生求职信
2013/10/20 职场文书
中专生的个人自我评价
2013/12/11 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
焦裕禄观后感
2015/06/03 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书