main.htm:
<
html
>
< head >
< meta http-equiv =’Content-Type’ content =’text/html; charset =gb2312’ />
< title > iframe自适应加载的页面高度 title>
head>
<body>
<div><iframe src="child.htm"> iframe> div>
body>
html>
< head >
< meta http-equiv =’Content-Type’ content =’text/html; charset =gb2312’ />
< title > iframe自适应加载的页面高度 title>
head>
<body>
<div><iframe src="child.htm"> iframe> div>
body>
html>
child.htm:
<
html
>
< head >
< meta http-equiv =’Content-Type’ content =’text/html; charset =gb2312’ />
< title > iframe 自适应其加载的网页(多浏览器兼容) title>
<script type="text/javascript">
script>
head>
<body>
<table border="1" width="200" style="height: 400px; background-color: yellow">
<tr>
<td>iframe 自适应其加载的网页(多浏览器兼容:IE5.5+、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等,支持XHTML) td>
tr>
table>
body>
html>
< head >
< meta http-equiv =’Content-Type’ content =’text/html; charset =gb2312’ />
< title > iframe 自适应其加载的网页(多浏览器兼容) title>
<script type="text/javascript">
script>
head>
<body>
<table border="1" width="200" style="height: 400px; background-color: yellow">
<tr>
<td>iframe 自适应其加载的网页(多浏览器兼容:IE5.5+、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等,支持XHTML) td>
tr>
table>
body>
html>
很多人反应在IE7里使用它会死机,那是因为在自适应高度时触发了 window.onresize 事件,而这个事件又去调用这个调整 > 高度的函数,产生了死循环调用。
这段代码里我对 iframe 所在的父元素也设定了一个高度,以防止iframe 高度变化时页面跳动的太厉害,在调用的时候可酌情使用这个设置。