怎么让iframe的高度根据所加载页的高度而改变
怎么让iframe的高度根据所加载页的高度而改变
解决思路:
如果页面没有加载完成是无法知道它的高度的,所以不能直接设置,而必须通过iframe的onload事件来触发脚本,在 iframe 加载完后重新设置它的高为所加载文档的滚动高度。
具体步骤:
1.包含框架页的代码。
<iframe frameborder="0" scrolling="no" name="demo"
onload="document.all.demo.height=document.frames[’demo’].document.body.scrollHeight" src="demo.htm" width="100%"></iframe>
2.demo.htm页代码。
<body bgColor="#EEEEEE">
<script>
document.write(new Array(100).join("1<br>"))
</script>
注意:本例代码仅适用于IE5.5以上版本的浏览器。
技巧:IE5.0不能用的原因是因为没有iframe对象onload事件,所以只能通过设置计时器不断重试:
<iframe frameborder="0" scrolling="no" name="demo" src="/demo.asp" width="100%"></iframe>
<script for="window" event="onload">
setInterval("document.all.demo.height=document.frames[’demo’].document.body.scrollHeight",1000)
</script>
特别提示
用IE5.5以上版本的浏览器浏览,在iframe加载完成后它的高度将自动适应为所加载页的页面高度。而IE5.5以下的浏览器,只能通过setInterval不断设置iframe的高度。图1.6.10 为本例代码的运行效果(IE6)。
图1.6.10 自适应页面高度的iframe
解决思路:
如果页面没有加载完成是无法知道它的高度的,所以不能直接设置,而必须通过iframe的onload事件来触发脚本,在 iframe 加载完后重新设置它的高为所加载文档的滚动高度。
具体步骤:
1.包含框架页的代码。
<iframe frameborder="0" scrolling="no" name="demo"
onload="document.all.demo.height=document.frames[’demo’].document.body.scrollHeight" src="demo.htm" width="100%"></iframe>
2.demo.htm页代码。
<body bgColor="#EEEEEE">
<script>
document.write(new Array(100).join("1<br>"))
</script>
注意:本例代码仅适用于IE5.5以上版本的浏览器。
技巧:IE5.0不能用的原因是因为没有iframe对象onload事件,所以只能通过设置计时器不断重试:
<iframe frameborder="0" scrolling="no" name="demo" src="/demo.asp" width="100%"></iframe>
<script for="window" event="onload">
setInterval("document.all.demo.height=document.frames[’demo’].document.body.scrollHeight",1000)
</script>
特别提示
用IE5.5以上版本的浏览器浏览,在iframe加载完成后它的高度将自动适应为所加载页的页面高度。而IE5.5以下的浏览器,只能通过setInterval不断设置iframe的高度。图
图1.6.10 自适应页面高度的iframe
特别说明
本例的知识点主要是对iframe对象和它所加载页面对象的访问方法,其中用到一个比较重要的属性:scrollHeight。
scrollHeight 获取对象的滚动高度。需要注意的是并不等于页面高度,只是约等于。