编程 Javascript

让iframe自适应高度（支持XHTML，支持FF）

Posted in Javascript onJuly 24, 2007

先说明，这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面）

======方法=====
第一步 js部分

       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。

让iframe自适应高度（支持XHTML，支持FF）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

把jQuery的类、插件封装成seajs的模块的方法

Mar 12 Javascript

js用typeof方法判断undefined类型

Jul 15 Javascript

JS实现图片放大镜效果的方法

Feb 27 Javascript

js实现两点之间画线的方法

May 12 Javascript

JavaScript判断undefined类型的正确方法

Jun 30 Javascript

JavaScript实现节点的删除与序号重建实例

Aug 05 Javascript

详解 javascript中offsetleft属性的用法

Nov 11 Javascript

Angularjs过滤器使用详解

May 25 Javascript

JavaScript实现简单的日历效果

Sep 25 Javascript

基于JavaScript实现熔岩灯效果导航菜单

Jan 04 Javascript

详解如何使用webpack打包Vue工程

May 27 Javascript

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

Nov 02 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