让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 相关文章推荐
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
Vue中key的作用示例代码详解
Jun 10 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
pdo中使用参数化查询sql
2011/08/11 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
js清理Word格式示例代码
2014/02/13 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
详解webpack 如何集成第三方js库
2017/06/29 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
django之自定义软删除Model的方法
2019/08/14 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
如何真正的了解python装饰器
2020/08/14 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
JPA的特点
2014/10/25 面试题
公证书样本
2014/04/10 职场文书
大学班级计划书
2014/04/29 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js