[HTML]让iframe随iframe的内容自适应宽度和高度
一个奇怪的需求，一个html页面A内的正中需要使用iframe打开另一个页面B，B页面的内容可长可短，要求用来显示B页面内容的iframe根据B页面的实际显示高度自适应调整高度。同时不能在修改A页面的代码。
解决方法，使用iframe可以直接使用parent.parent.document控制父页面的document内容，但是需要注意进行自适应调整的时间，需要在B页面全部加载完成后才可以。
实现代码，IE下测试有效：
A页面(parent.html),代码不改变
<html> <head> </head> <body> <iframe id="main" name="main" src="child.html" width="0" height="0"></iframe> </body> </html> |
B页面(child.htm)
<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> |
Recent Comments