首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

让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。

让iframe自适应高度（支持XHTML，支持FF）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
vue实现评价星星功能
Jun 30 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
信号库(1) 定时任务(2) Keras(3) 计时器(1) blinker(1) turtle(1) Mysql报错(1) MYSQL函数(1) 三子棋(2) 绘图(1)
You might like
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP字符串逆序排列实现方法小结【strrev函数，二分法，循环法，递归法】
2017/01/13 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
js初始化验证实例详解
2016/11/26 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Vue.js分页组件实现：diVuePagination的使用详解
2018/01/10 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python字符转换
2008/09/06 Python
Python 异常处理实例详解
2014/03/12 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
美味咖啡的顶级烘焙师：Cafe Britt
2018/03/15 全球购物
大学考试作弊检讨书
2014/01/30 职场文书
学雷锋宣传标语
2014/06/25 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
贫困生证明范文
2015/06/16 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书