让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 Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
node.js博客项目开发手记
Mar 16 Javascript
详解puppeteer使用代理
Dec 27 Javascript
微信小程序如何连接Java后台
Aug 08 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
实用函数5
2007/11/08 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php数组转成json格式的方法
2015/03/09 PHP
php远程下载类分享
2016/04/13 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
JavaScript Array对象基本方法详解
2019/09/03 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
Python修改MP3文件的方法
2015/06/15 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python实现按长宽比缩放图片
2018/06/07 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
abstract是什么意思
2012/02/12 面试题
个人实用简单的自我评价
2013/10/19 职场文书
高中语文教学反思
2014/01/16 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers