當document.body存在時執行js

Question

我在文檔HEAD部分中有這樣的腳本。

<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為null異常而失敗。 我知道該身體目前不存在。 但是我仍然需要執行此操作，因為無法將此腳本插入正文，受API限制，我無法訪問所有站點代碼。

重要的一點：在窗口加載之前，我需要執行此操作（我的意思是window.load事件）。

我可以這樣做嗎？

Answer 1

如果您不想使用Jquery ，則可以使用DOMContentLoaded 請參見此處的參考。

當文檔完全加載並解析后，無需等待樣式表，圖像和子幀完成加載，就會觸發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

Answer 2

我通常避免使用框架，除非絕對必要，但在這種情況下，我認為您可以使用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在加載所有其他資源（圖像等）之后執行

我在示例中顯示的代碼將在DOM完成加載后執行

Answer 3

看起來最快的檢測document.body何時可用的方法是使用MutationObserver ，如https://stackoverflow.com/a/26324641/454780所示

當document.body存在時執行js

問題描述

3 個解決方案

解決方案1
3 已采納 2014-04-11 08:53:36

解決方案2
1 2014-04-11 08:45:15

解決方案3
0 2019-01-30 04:31:24

當document.body存在時執行js

問題描述

3 個解決方案

解決方案1 3 已采納 2014-04-11 08:53:36

解決方案2 1 2014-04-11 08:45:15

解決方案3 0 2019-01-30 04:31:24

解決方案1
3 已采納 2014-04-11 08:53:36

解決方案2
1 2014-04-11 08:45:15

解決方案3
0 2019-01-30 04:31:24