让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 相关文章推荐
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
javascript处理table表格的代码
Dec 06 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
javascript实现yield的方法
Nov 06 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
jQuery使用each遍历循环的方法
2018/09/19 jQuery
新手入门js闭包学习过程解析
2019/10/08 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python使用Matplotlib画条形图
2020/03/25 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
基于python实现把图片转换成素描
2019/11/13 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python函数式编程实例详解
2020/01/17 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
《小石潭记》教学反思
2014/02/13 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
离职告别感言
2015/08/04 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
GPU服务器的多用户配置方法
2022/07/07 Servers