怎麼讓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 獲取對象的滾動高度。需要注意的是並不等於頁面高度,只是約等於。
解決思路:
如果頁面沒有加載完成是無法知道它的高度的,所以不能直接設置,而必須通過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 獲取對象的滾動高度。需要注意的是並不等於頁面高度,只是約等於。