让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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
原生js实现分页效果
Sep 23 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
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
javascript的BOM
2016/05/03 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python检测网络延迟的代码
2018/05/15 Python
用Python读取几十万行文本数据
2018/12/24 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
会计学自我鉴定
2014/02/06 职场文书
党员检讨书
2014/10/13 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
考研英语辞职信
2015/05/13 职场文书
科技馆观后感
2015/06/08 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
tomcat下部署jenkins的方法
2022/05/06 Servers