让iframe自适应高度(支持XHTML,支持FF)


Posted in Javascript onJuly 24, 2007

先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面)

======方法=====
第一步 js部分

function getSize() {
       var xScroll, yScroll;       
       if (window.innerHeight && window.scrollMaxY) {       
              xScroll = document.body.scrollWidth;
              yScroll = window.innerHeight + window.scrollMaxY;
       } else if (document.body.scrollHeight > document.body.offsetHeight){       // all but Explorer Mac
              xScroll = document.body.scrollWidth;
              yScroll = document.body.scrollHeight;
       } else {       // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
              xScroll = document.body.offsetWidth;
              yScroll = document.body.offsetHeight;
       }

       var windowWidth, windowHeight;
       if (self.innerHeight) {       // all except Explorer
              windowWidth = self.innerWidth;
              windowHeight = self.innerHeight;
       } else if (document.documentElement && document.documentElement.clientHeight) {       // Explorer 6 Strict Mode
              windowWidth = document.documentElement.clientWidth;
              windowHeight = document.documentElement.clientHeight;
       } else if (document.body) {       // other Explorers
              windowWidth = document.body.clientWidth;
              windowHeight = document.body.clientHeight;
       }       

       // for small pages with total height less then height of the viewport
       if(yScroll < windowHeight){
              pageHeight = windowHeight;
              y = pageHeight;
       } else { 
              pageHeight = yScroll;
              y = pageHeight;
       }

       if(xScroll < windowWidth){       
              pageWidth = windowWidth;
       } else {
              pageWidth = xScroll;
       }

       arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
       return arrayPageSize;
}
这段代码用来获取目标页的参数,包括页面高、宽,屏幕高、宽

function autoHeight(pid) {
       var x = new getSize();
       parent.document.getElementById(pid).height=x[1];
}
这段代码用来实现父页面中iframe的高度自适应

\\\\\\\\\\

第二步 页面部分

<div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>
这是父页面的iframe,没什么特别的,和普通的iframe一样,不过要设置好id值,以便子页面的参数调用。

<body onload="autoHeight('infrm')"></body>
在body中利用onload事件,将自身的高度传给父页面的iframe。

Javascript 相关文章推荐
JavaScript的document对象和window对象详解
Dec 30 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
动态Axios的配置步骤详解
Jan 12 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
一个JS翻页效果
Jul 23 #Javascript
XML的代替者----JSON
Jul 21 #Javascript
js右键菜单效果代码
Jul 21 #Javascript
$()JS小技巧
Jul 21 #Javascript
IE 缓存策略的BUG的解决方法
Jul 21 #Javascript
用JS实现的一个include函数
Jul 21 #Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
python实现从web抓取文档的方法
2014/09/26 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python lambda表达式用法实例分析
2018/12/25 Python
举例讲解Python常用模块
2019/03/08 Python
python实现websocket的客户端压力测试
2019/06/25 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
同学聚会欢迎辞
2014/01/14 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL