让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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
JS 调试中常见的报错问题解决方法
May 20 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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模板之Phpbean的目录结构
2008/01/10 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Windows下安装python2和python3多版本教程
2017/03/30 Python
python正则表达式的使用
2017/06/12 Python
python使用turtle库绘制时钟
2020/03/25 Python
PHP统计代码行数的小代码
2019/09/19 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
python如何判断IP地址合法性
2020/04/05 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
心得体会怎么写
2013/12/30 职场文书
银行委托书范本
2014/04/04 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
出生公证书
2015/01/23 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
标枪加油稿
2015/07/22 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书