让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。

您可能感兴趣的文章:

javascript 模拟点击广告
我们不管js或iframe怎么调用的，模拟点击就意味着打开广告链接，广告商就以为用户点击了他的广告，所以我们只要保证点击了一个链接但没有跳出页面的结果就行了，是吗？
2010-01-01
JavaScript基础之AJAX简单的小demo
这篇文章主要介绍了JavaScript基础之AJAX简单的小demo ，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
Swiper如何实现两行四列轮播图效果实例
大家应该都知道,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,下面这篇文章主要给大家介绍了关于Swiper如何实现两行四列轮播图效果的相关资料,需要的朋友可以参考下
2022-10-10
JavaScript实现图片懒加载的三种方案详解
图片懒加载,当图片出现在可视区域再进行加载,提升用户的体验,这篇文章主要为大家整理了三个常用的图片懒加载实现方法,希望对大家有所帮助
2023-12-12
JS简单计算器实例
这篇文章主要介绍了JS简单计算器的实现方法,以加法实例分析了js实现计算功能的技巧,需要的朋友可以参考下
2015-01-01
JavaScript之浏览器对象_动力节点Java学院整理
JavaScript可以获取浏览器提供的很多对象，并进行操作。下面通过本文给大家介绍JavaScript之浏览器对象的相关知识，一起看看吧
2017-07-07
JavaScript的Number对象的toString()方法
toString()方法可以把Number对象转换成字符串，并返回此字符串，本文给大家介绍JavaScript的Number对象的toString()方法，对javascript对象方法相关知识感兴趣的朋友一起学习吧
2015-12-12
JavaScript中字符串分割函数split用法实例
这篇文章主要介绍了JavaScript中字符串分割函数split用法,实例分析了javascript中split函数操作字符串的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
HTML5实现微信拍摄上传照片功能
这篇文章主要介绍了HTML5实现微信拍摄上传照片功能，实现HTML5 Canvas手机拍摄，本地压缩上传图片时遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
跟我学习javascript的prototype,getPrototypeOf和__proto__
跟我学习javascript的prototype,getPrototypeOf和__proto__，深入学习了三个用来访问prototype的方法，感兴趣的小伙伴们可以参考一下
2015-11-11