我正在嘗試寫入方法& onload事件。這裏是我的代碼：Document.write方法問題

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body onload="document.write('body loaded!')"> 
     <h1>Hello World!</h1> 
     <img onload="document.write('img loadeld!')" src="smiley.gif" alt="Smiley face" width="42" height="42" /> 
    </body> 
</html>

如果我運行該瀏覽器輸出「IMG loadeld」，只是「掛起」，似乎是無限加載頁面。我期望瀏覽器輸出「img loadeld」，然後當正文元素準備就緒「正文加載」，並正常停止。

我的問題：

爲什麼會出現這樣的掛？爲什麼img元素上的onload事件阻止瀏覽器繼續渲染「body loaded」&？
爲什麼如果我從img元素刪除onload處理程序的響應是預期的 - 「身體加載」和頁面不被阻止。

來源

2012-09-11 Mulligan

感謝您的回答:-) ** 1。）**因此，在文檔關閉之前發生body onload事件，因此它已關閉，因此無需加載微調器。我是對的？那麼，爲什麼當我使用這樣的代碼： '<身體的onload = 「警報（ '體裝！'）」> \t \t

的Hello World！

\t \t ' 第一個警報是「IMG loadeld」 NOT 「體加載」 ??? ** 2。）**爲什麼我必須在加載圖像後顯式調用文檔，而我沒有在body onload =「document.write？之後執行該操作？如果事件在最後一種情況下自動執行body onload）？ – Mulligan

當document.write用於函數內部後，html被加載後，它會寫入新的 html文件。 onload是一個事件處理程序，因此<img onload="document.write('img loadeld!')"/> = img.onload = function(event){document.write('img loadeld!');}。
它不阻止頁面加載，它只是創建新的空白html文檔。

來源

2012-09-11 18:56:14

這是因爲document.write()清除整個文檔，然後將參數寫入到頁面，嘗試document.writeln('Img loaded');追加到身體，但要堅持你真正想要的東西：

<img onload="document.body.innerHTML += '<h1>Loaded</h1>'"'

或寫函數創建了一個元素，並使用document.body.appendChild(elem)，在這種情況下，可以用任何塊元素

來源

2012-09-11 18:56:34

創建消息容器，更換document.body諸如DIV並設置innerHTML，不使用。寫（）

來源

2012-09-11 18:56:36

簡單地說，在之後調用document.write()DOM準備好會導致它覆蓋現有的DOM。

來源

2012-09-11 18:56:42

感謝您的詳細回答:-) – Mulligan

一切工作正常（雖然不是你所期望的），沒有什麼是「掛起」或「阻塞」。然而，這一切發生得如此之快，以至於它並不是如此。希望解釋寫入文檔和事件順序將有助於您：

在文檔關閉後（文檔已就緒），您的IMG onload事件觸發。

document.write()但是，只能輸出到打開文件。

如果文件已經關閉，document.write()（docs）隱式調用document.open()（docs），這溼巾整個文檔。您撥打write然後輸出您告訴它的內容。文檔保持打開狀態直至明確關閉（document.close()（docs）），因此「加載微調器」將繼續顯示。

操作，然後的基本流程，它正在發生（如此之快，你沒有注意到這一切發生的事情，事情看起來破）是：

頁面請求作出收到
頁面響應
文檔被打開，內容被解析並投入到位，包括第一document.write（不必調用打開，因爲文件是當前已打開）
文檔關閉
IMG標記的檢索完成並且事件觸發
事件處理程序調用document.write
文檔被隱式重新打開（新文檔已創建，所有內容都丟失;裝載微調顯示）
您的參數document.write()輸出到新文檔
一切都完成後，文件仍然是開放的

DOM操作技術（appendChild()，書面方式向innerHTML等），應改爲使用document.write爲了修改現有內容而不覆蓋所有內容。

該好這裏的消息是，既然發生這種情況，你確實知道你的圖像加載成功。正如我前面提到的那樣，你只需要找出正確的方法來應對它。

來源

2012-09-11 18:58:47 JAAulde

Document.write方法問題

的Hello World！

回答

相關問題