document.write()的五四三

ppk on javascript上看到的,我終於快把這本看完了,不過這個還是先紀錄一下。

首先,標準狂人大概不會想用document.write(),他們大概是全部都用W3C DOM來新增資料到網頁裡面,事實上我也很偏好這樣,不過這邊的特殊情況是在新增外部連結的CSS檔案的時候,如果你用W3C DOMinsertBefore()或是appendChild(),你不能在網頁還沒完全讀取完成的時候就進行這樣的動作,因為head物件(因為是在講DOM,所以這裡我用物件)可能還沒出現,必須要等到head的結束標籤被瀏覽器讀到之後head物件才算是完整,也才能用DOM進行操作,因此要進行這種動作時,通常都會利用onload來觸發事件,可以確保script在執行時,物件都已經完整了。但是這樣會有些小問題,因為是在新增外部連結的CSS檔案,新增的樣式設定可能會把某些東西藏起來,而使用者瀏覽網頁時可能會看到這些東西一閃而過,這樣會對他們造成困擾,因此要盡量避免,所以在這種情況下,就會建議使用document.write()這個函式。

document.write()可以讓script在head標籤還沒讀完的時候就在其內部加入新的標籤,包括連結外部CSS檔案的link標籤,因此該套用的樣式在瀏覽器開始讀body標籤之前就都有了,瀏覽器就可以直接照該樣式來繪製網頁,而不會有前面的東西一閃即逝的狀況。另外document.write()這個函式在使用上有一點要注意的是,如果網頁已經讀取完成才執行這個函式,瀏覽器並不是把內容新增到網頁裡面,而是製作一個包含新插入內容的網頁,把原來的取代掉,在這種情況下,使用者也可能會看到網頁會有瞬間變白畫面(一閃)的狀況。

以上是ppk on javascript提出的,我基本上都認同,不過想補充的是script標籤可以插入在head或是body內的任何地方,所以在body內才使用W3C DOM修改head內的東西也是可行的,只是感覺上東西放錯地方就是了。