怎麼讓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> _fcksavedurl=""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對象和它所加載頁面對象的訪問方法,其中用到一個比較重要的屬性:scrollHeight。
scrollHeight 獲取對象的滾動高度。需要注意的是並不等於頁面高度,只是約等於。
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章