源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] 让iframe自适应高度(支持XHTML,支持FF)

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2007-7-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。
回复

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2022-8-25 01:40:32 | 显示全部楼层
建军节建军节建军节建军节
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2022-12-12 06:19:35 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2023-4-26 12:53:27 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-11-22 13:35:23 | 显示全部楼层
很好,谢谢分享
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2024-3-2 07:33:00 | 显示全部楼层
好人好人好人好人
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-5-16 02:07:12 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

473

积分

中级会员

Rank: 3Rank: 3

积分
473
发表于 2024-6-24 16:48:35 | 显示全部楼层
儿飞飞微风DVD谁vdsvd
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

59

积分

注册会员

Rank: 2

积分
59
发表于 2024-8-22 07:34:57 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

473

积分

中级会员

Rank: 3Rank: 3

积分
473
发表于 2024-9-1 13:41:47 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-21 02:50 , Processed in 0.079223 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表