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

 找回密码
 立即注册
查看: 230|回复: 17

[JavaScript] javascript 装载iframe子页面,自适应高度

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2009-3-20 23:14:55 | 显示全部楼层 |阅读模式
javascript 装载iframe子页面,自适应高度 假设主页面有一个div,里面放置一个iframe
复制代码 代码如下:
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe>
</div>

3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行
复制代码 代码如下:
function aa(){
var newHeight = document.body.scrollHeight + 20 + "px";
window.parent.document.getElementById("frameBox").style.height = newHeight;
//以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改
window.parent.document.getElementById("frameWin").style.height = newHeight;
}

以下方法只需要把代码放在主页面:
页面代码:
复制代码 代码如下:
<div style="border:1px solid #7e99c6" id="frameBox">
<iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe>
</div>

js脚本(加在主页面):
复制代码 代码如下:
function test2(){
var frameWin = document.getElementById("frameWin");
var frameBox = document.getElementById("frameBox");
var newHeight;
if (frameWin.Document){
newHeight = frameWin.Document.body.scrollHeight + 20 + "px";
}else{
newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
}
frameWin.style.height = newHeight;
frameBox.style.height = newHeight;
}
回复

使用道具 举报

4

主题

2万

回帖

262

积分

中级会员

Rank: 3Rank: 3

积分
262
发表于 2022-8-8 13:16:51 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

8

主题

2万

回帖

52

积分

注册会员

Rank: 2

积分
52
发表于 2022-9-26 00:13:43 | 显示全部楼层
建军节建军节建军节建军节
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2022-12-14 11:41:11 | 显示全部楼层
这个源码不错啊
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-14 13:04:45 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2023-5-28 15:50:48 | 显示全部楼层
iiguuubhuiuihu
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2024-4-2 10:00:53 | 显示全部楼层
2222222222222222
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2024-6-26 05:20:14 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2024-8-17 04:03:23 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

20

主题

6263

回帖

105

积分

注册会员

Rank: 2

积分
105
发表于 2024-8-27 05:34:19 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

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

GMT+8, 2024-11-24 13:01 , Processed in 0.072737 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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