以前我自己也犯過這么個錯誤，就是在document.write之后，發現腳本報錯誤。當然后來是知道了，最近看到有網友在群里提出類似的問題。我在這里就總結下document.write的用法和注意事項。
先看下面一個小網頁：
<!
DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"http://www.w3.org/TR/html4/strict.dtd"
>
<
html
>
????
<
head
>
????????
<
meta?
http-equiv
="Content-Type"
?content
="text/html;?charset=iso-8859-1"
?
/>
????????
<
title
>
Untitled?Document
</
title
>
????
</
head
>
????
<
script?
type
="text/javascript"
>
????????
function
?InitPage()
????????{
????????????
var
?obj?
=
?document.getElementById(
"
DIV_top
"
);
????????????
//
document.write(document.getElementById("DIV_top").style.width);
????????????
//
document.write(document.getElementById("DIV_top").style.height);
????????????document.write(obj.style.width);
????????????document.write(obj.style.height);
????????????
????????}
????
</
script
>
????
<
body?
onload
="InitPage();"
>
????????
<
div?
id
="DIV_top"
?style
="width:400px;?height:200px;"
>
?This?is?a?test?!
</
div
>
????
</
body
>
</
html
>
這個網頁執行是沒有問題的。
下面請將函數當前注釋去掉，最后兩行加上注釋，如：
var?obj?=?document.getElementById("DIV_top");
????????????document.write(document.getElementById("DIV_top").style.width);
????????????document.write(document.getElementById("DIV_top").style.height);
????????????//document.write(obj.style.width);
????????????//document.write(obj.style.height);
???執行過程發生什么情況了？ 首先結果是只輸出了 400px ，如果你的調試工具夠先進就看到了，明確提示document.write(document.getElementById("DIV_top").style.height); 中，document.getElementById("DIV_top"). 為null
根據上面的小測試，我想你對document.write的細節已經清楚了。
?現在總結下：
document.write 產生一個文檔輸出流，會將先前的內容一次覆蓋。 但是內存并沒有釋放對象，只是頁面已經沒有其句柄。 這個和js垃圾回收機制有關。
也許你會問，為什么第一個例子中的第二句 document.write沒有將第一句的產生的內容沖掉呢？
這個。。。就好比你以流方式打開一個文件，第一次寫的時候是覆蓋，將文件內容都清掉。而第二次寫的時候，并不需要重新打開了。
試試下面這個例子：
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN">
<html>
????<head>
????????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????????<title>Untitled?Document</title>
????</head>
????<script?type="text/javascript">
????????function?InitPage()
????????{
????????????var?obj?=?document.getElementById("DIV_top");
????????????var?temp?=?"add";
????????????
????????????var?str?=?"<input?type=\"button\"?onclick=\"document.write(\'可以不停的增加\');\"?name=\'Test\'?value=\'Test\'/>";
????????????document.write(obj.style.width);
????????????document.write(obj.style.height);
????????????document.write(str);
????????}
????</script>
????<body?onload="InitPage();">
????????<div?id="DIV_top"?style="width:400px;?height:200px;">?This?is?a?test?!</div>
????????
????</body>
</html>
呵呵，比看枯燥的文字有意思吧。程序就是要多動手練習，實踐。特別是自己有想法的時候，用代碼去證明。
posted on 2008-11-25 01:41
-274°C 閱讀(5415)
評論(4) 編輯 收藏 所屬分類:
web前端