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数据分享
May 12 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
js文字横向滚动特效
Nov 11 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
在微信小程序中保存网络图片
Feb 12 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
JS实现前端页面的搜索功能
2018/06/12 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python程序需要编译吗
2020/06/19 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
垃圾回收的优点和原理
2014/05/16 面试题
经典演讲稿汇总
2014/05/19 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
欠条范文
2015/07/03 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python