當document.body存在時執行js

我在文檔HEAD部分中有這樣的腳本。當document.body存在時執行js

<html> 
<head> 
    <title>Javascript Tests</title>  
    <script type="text/javascript"> 
     var mySpan = document.createElement("span"); 
     mySpan.innerHTML = "This is my span!"; 

     mySpan.style.color = "red"; 
     document.body.appendChild(mySpan); 
    </script> 
</head> 
<body> 
</body> 
</html>

在這個劇本我想元素添加到身體，但它失敗document.body的是空例外。我知道這個機構目前不存在。但我仍然需要做這個操作，因爲一個不能將此腳本插入正文，它受API限制，我無法訪問所有站點代碼。

而重要的一點：我需要做這個窗口之前將加載（我的意思是window.load事件）。

我可以這樣做嗎？

來源

2014-04-11 Alex

你使用的是jQuery嗎？ – Alex

想要在window.onload之前使用「body」元素沒門。因爲DOM尚未構造，因此body元素將不存在 –

@vivek_nk實際上，在解析器遇到開始的'body'標籤後，'body'元素立即存在。 – Teemu

如果你不想使用Jquery可以使用DOMContentLoadedsee reference here

的DOMContentLoaded事件被觸發時，該文檔已被完全加載和分析，而無需等待樣式表，圖片和子框架完成加載

document.addEventListener("DOMContentLoaded", function(event) { 
    var mySpan = document.createElement("span"); 
    mySpan.innerHTML = "This is my span!"; 
    mySpan.style.color = "red"; 
    document.body.appendChild(mySpan); 
});

瀏覽器支持：

Chrome  Firefox (Gecko)   IE Opera Safari 

0.2   1.0 (1.7 or earlier) 9.0 9.0  3.1

來源

2014-04-11 08:53:36 Merlin

這會在'body'的末尾加上'span'，它是你希望它出現的地方嗎？ – Teemu

我需要身體，不管在哪裏 – Alex

我通常避免使用框架，除非絕對必要的，但在這種情況下，我認爲你可以使用jQuery：

$(function() { 
    // do stuff after DOM has loaded 
});

所以，包裝你的代碼如下所示：

<script type="text/javascript"> 
$(function() { 
    var mySpan = document.createElement("span"); 
    mySpan.innerHTML = "This is my span!"; 

    mySpan.style.color = "red"; 
    document.body.appendChild(mySpan); 
}); 
</script>

記住，你需要引用jQuery

這與window.onload不同 - onload在所有其他資源加載後執行（images et et角）

的代碼，我在我的例子表明將執行當DOM完成加載

來源

2014-04-11 08:45:15 Alex

當document.body存在時執行js

回答

相關問題