让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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
Javascript 面向对象特性
Dec 28 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
一个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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
用PHP 4.2书写安全的脚本
2006/10/09 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
js中有关IE版本检测
2012/01/04 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Python编写一个闹钟功能
2017/07/11 Python
深入理解Python中的super()方法
2017/11/20 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
为数据库创建索引都需要注意些什么
2012/07/17 面试题
小学教师自我鉴定
2013/11/07 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
企业环保标语
2014/06/10 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
详解CocosCreator项目结构机制
2021/04/14 Javascript
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
MySQL空间数据存储及函数
2021/09/25 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers