让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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
JavaScript Date对象应用实例分享
Oct 30 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
Vue的生命周期操作示例
Sep 17 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中调用SVN命令更新网站方法
2015/01/07 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JavaScript中的闭包
2016/02/24 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
js表单登陆验证示例
2016/10/19 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
npm的lock机制解析
2019/06/20 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
python实现给字典添加条目的方法
2014/09/25 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python如何输出百分比
2020/07/31 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
某公司面试题
2012/03/05 面试题
毕业实习评语
2014/02/10 职场文书
六查六看剖析材料
2014/02/15 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书