以前我自己也犯過這么個(gè)錯(cuò)誤，就是在document.write之后，發(fā)現(xiàn)腳本報(bào)錯(cuò)誤。當(dāng)然后來是知道了，最近看到有網(wǎng)友在群里提出類似的問題。我在這里就總結(jié)下document.write的用法和注意事項(xiàng)。
先看下面一個(gè)小網(wǎng)頁：
<!
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
>
這個(gè)網(wǎng)頁執(zhí)行是沒有問題的。
下面請(qǐng)將函數(shù)當(dāng)前注釋去掉，最后兩行加上注釋，如：
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);
???執(zhí)行過程發(fā)生什么情況了？ 首先結(jié)果是只輸出了 400px ，如果你的調(diào)試工具夠先進(jìn)就看到了，明確提示document.write(document.getElementById("DIV_top").style.height); 中，document.getElementById("DIV_top"). 為null
根據(jù)上面的小測(cè)試，我想你對(duì)document.write的細(xì)節(jié)已經(jīng)清楚了。
?現(xiàn)在總結(jié)下：
document.write 產(chǎn)生一個(gè)文檔輸出流，會(huì)將先前的內(nèi)容一次覆蓋。 但是內(nèi)存并沒有釋放對(duì)象，只是頁面已經(jīng)沒有其句柄。 這個(gè)和js垃圾回收機(jī)制有關(guān)。
也許你會(huì)問，為什么第一個(gè)例子中的第二句 document.write沒有將第一句的產(chǎn)生的內(nèi)容沖掉呢？
這個(gè)。。。就好比你以流方式打開一個(gè)文件，第一次寫的時(shí)候是覆蓋，將文件內(nèi)容都清掉。而第二次寫的時(shí)候，并不需要重新打開了。
試試下面這個(gè)例子：
<!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>
呵呵，比看枯燥的文字有意思吧。程序就是要多動(dòng)手練習(xí)，實(shí)踐。特別是自己有想法的時(shí)候，用代碼去證明。
posted on 2008-11-25 01:41
-274°C 閱讀(5410)
評(píng)論(4) 編輯 收藏 所屬分類:
web前端