让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 相关文章推荐
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
js简单抽奖代码
Jan 16 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
简单谈谈json跨域
Mar 13 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python中return self的用法详解
2018/07/27 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python实现序列化及csv文件读取
2020/01/19 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
合作经营协议书
2014/04/17 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
全民创业工作总结
2015/08/13 职场文书
小学运动会入场口号
2015/12/24 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python