让iframe自适应高度（支持XHTML，支持FF）
更新时间：2007年07月24日 00:00:00 作者：
先说明，这个办法只限于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。
======方法=====
第一步 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下拉框选项单击事件的例子，以及在例子中遇到的问题的解决方法，十分实用，推荐给小伙伴们参考下。2015-03-03
滑动锚点挺有意思的,可增加一些浏览性,下面这篇文章主要给大家介绍了关于js锚点、操作滚动条滑动scroll的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
js加强的经典分页实例，需要的朋友可以参考一下2013-03-03
本文主要介绍了TypeScript 类型断言的实现，有使用关键字as和标签<>两种方式，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了js实现简单的左右两边固定广告效果,实例分析了javascript实现固定广告的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要给大家介绍了关于JS时间戳与日期格式互相转换的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
3MF是一种开放标准的文件格式,专门用于三维制造和打印,这篇文章主要介绍了如何使用JavaScript实现加载导出3mf文件,感兴趣的可以了解下2024-11-11
本文通过实例代码很详细的给大家介绍了js中的多态，感兴趣的朋友一起看看吧2017-10-10
本文给大家分享基于js和canves实现点击按钮水波纹效果，效果非常逼真，对此感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了JS实现不规则TAB选项卡效果代码,通过简单的JavaScript响应鼠标事件动态变换元素样式实现不规则选项卡效果,非常具有实用价值,需要的朋友可以参考下2015-09-09
最新评论