爲什麼只有其中的一行javascript會在頁面加載時觸發？

我想真正理解瀏覽器如何加載網頁的細節。爲什麼只有其中的一行javascript會在頁面加載時觸發？

我在連接到一個HTML文件.js文件兩個JavaScript語句：

d3.select("body").append("span").text("Hello, world!"); 
alert("huh?");

當我加載網頁，我看到一則快訊「呵呵。」所以這個「呃」聲明就會發生。

但是，「Hello，world」未附加到文檔正文。

如果我然後在控制檯中運行d3.select("body").append("span").text("Hello, world!")，那麼它按預期執行 - 即，它增加了「你好，世界」的身體。

這是怎麼回事？ alert("huh?")在DOM中的window.onload事件之後觸發，是否正確？但d3.select...不開火？

爲什麼這種差異？

來源

2014-01-25 bernie2436

如果導入你的腳本在''然後當代碼運行**沒有''但是** - 在繼續解析HTML文檔之前，瀏覽器在看到它時立即運行腳本代碼。特別是，瀏覽器不會等待「加載」事件，除非您專門安排將代碼放入函數並將其作爲事件的處理程序進行綁定。 – Pointy

處理DOM的代碼不會觸發的原因是因爲還沒有DOM。爲了解決這個問題，你可以

把你<script>標籤在body，所以它將運行一旦有身體
封裝代碼的window.onload內，所以當DOM就緒時，它會火。

示例第二個選項：

window.onload = function(){ 

    d3.select("body").append("span").text("Hello, world!"); 
    alert("huh?"); 

}

來源

2014-01-25 14:56:26 mjkaufer

頁面生命週期中的哪一點是否存在DOM？所有包括js射擊一旦包括在內？如果沒有他們，它什麼都不做？ – bernie2436

當頁面加載時，有一個DOM。 'onload'是DOM準備就緒時觸發的事件。一旦加載DOM，'onload'事件中的所有javascript都會觸發。在某些時候應該有一個DOM。技術上即使是空白頁也有DOM。如果你在一個空白的HTML頁面中有'onload'事件，代碼仍然會觸發。 – mjkaufer

瀏覽器會在找到它時立即運行找到的所有js？除非它在事件處理程序中（如window.onload） – bernie2436

而窗口加載事件的函數d3.select（「身體」）追加（「跨度」）文本。（「你好，世界！」） ;觸發但Element沒有加載，所以它沒有反映。當我們使用$（document）.ready函數時，這將在頁面滿載後觸發函數，因此觸發器可能反映並可見。在window.onload和$（document）.ready中，警報將相同。

來源

2014-01-25 14:56:42

爲此，您需要確保僅在目標元素存在於DOM樹中後才調用元素的選擇器。這就是jQuery的DOM準備如此受歡迎的原因。

基本上，有時頁面的內容很重（大圖像大小等）需要時間加載。在窗口加載事件之前，DOM就緒會首先被觸發。

在確保節點位於DOM樹中或換句話說，您需要在您的案例中選擇某些內容的任何函數都會被觸發;至少在DOM就緒事件觸發後。否則，即使它在一個瀏覽器上運行一次，它也可能是間歇性的，因爲它取決於種族，首先發生 - 執行JS或創建元素。每當前者發生時，它就會失敗。

我希望這有助於！

來源

2014-01-25 14:56:46

-1

尚無人體元素。解決辦法有兩個：

無論您等待文件加載

<head> 
<script> 
$(document).ready(function() { 
d3.select("body").append("span").text("Hello, world!") 
}); 
</head>

或者你把它放在身體

<body> 
<script> 
d3.select("body").append("span").text("Hello, world!") 
</script> 
</body>

來源

2014-01-25 14:57:12

爲什麼只有其中的一行javascript會在頁面加載時觸發？

回答

相關問題