让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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
微信小程序使用gitee进行版本管理
Sep 20 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
vue实现顶部菜单栏
Nov 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
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
繁简字转换功能
2006/07/19 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python中hashlib模块用法示例
2017/10/30 Python
python如何爬取个性签名
2018/06/19 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
《圆明园的毁灭》教学反思
2014/02/28 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
学历公证委托书
2014/04/09 职场文书
员工生日活动方案
2014/08/24 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript