让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 节点遍历函数
Mar 28 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
面试常见的js算法题
Mar 23 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
一个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
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
使用python实现名片管理系统
2020/06/18 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
优秀演讲稿范文
2013/12/29 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年组织部工作总结
2015/04/03 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers
使用Apache Camel表达REST服务的方法
2022/06/10 Servers