Home > 语言编程 > [HTML]让iframe随iframe的内容自适应宽度和高度

[HTML]让iframe随iframe的内容自适应宽度和高度

一个奇怪的需求,一个html页面A内的正中需要使用iframe打开另一个页面B,B页面的内容可长可短,要求用来显示B页面内容的iframe根据B页面的实际显示高度自适应调整高度。同时不能在修改A页面的代码。

解决方法,使用iframe可以直接使用parent.parent.document控制父页面的document内容,但是需要注意进行自适应调整的时间,需要在B页面全部加载完成后才可以。

实现代码,IE下测试有效:
A页面(parent.html),代码不改变

1
2
3
4
5
6
7
<html>
<head>
</head>
<body>
<iframe id="main" name="main" src="child.html" width="0" height="0"></iframe>
</body>
</html>

B页面(child.htm)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    //高度
    parent.parent.document.getElementById("main").style.height = document.documentElement.scrollHeight;
    //宽度
    parent.parent.document.getElementById("main").style.width = document.documentElement.scrollWidth;
});
</script>
<body>
<div style="height:800px; width:400px;">
<p>
111<br />
222<br />
333<br />
444<br />
555<br />
666<br />
777<br />
888<br />
999<br />
000<br />
</p>
</div>
</body>
</html>
Categories: 语言编程 Tags: ,
  1. No comments yet.
  1. No trackbacks yet.