堆棧內存溢出
  簡體   English   中英

Javascript onload無法正常工作（“未捕獲的TypeError：無法將屬性'document.body'設置為null”）

[英]Javascript onload isn't working (“Uncaught TypeError: Cannot set property 'document.body' of null ”)

 原文  2014-11-18 08:45:00  6   3    javascript/ null/ onload

問題描述

這是我的代碼：

Javascript： 

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

HTML標記： 

<button id="UP" onclick="toTop(350);"></button>

CSS樣式： 

#UP {display: none;}

我的想法是當我向下滾動時，將出現“ UP”按鈕。 但是不知道為什么，它甚至不會返回錯誤：“未捕獲的TypeError：無法將屬性'document.body'設置為null”。 當然，我確實更改了其他腳本，如下所示： 

function getReady() {
    UP();
}
function UP() {//Ẩn hiện nút UP
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

HTML標記： 

<body onload="getReady();">
    <button id="UP" onclick="toTop(350);"></button>
</body>

更可怕了。 當我加載網站時，沒有看到body標簽的onload attr，瀏覽器也沒有為我返回任何錯誤。

其他一些信息：我雙方都開發了Cr和FF，這都說明了一個相同的問題。 我正在研究Wordpress來源。

3 個解決方案

解決方案1
 4 已采納  2014-11-18 09:54:44

為了澄清@laruiss並解釋發生了什么，讓我們從您的代碼開始： 

/* body.onload is not recommended, window.onload is. But thats not the main issue*/
window.onload = function() {
    /* You are declaring a function here. Very important: 
     * its a declaration, NOT a function call 
     */
    function UP() {
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
    /* So if you want to execute ('call') your function, you have two options:
     * - Remove the declaration around your function aka `function UP(){` and the ending `}`
     * - Call the function here. To make your code work instantly, lets do that.
     */
    UP();
}

使用onload事件時，實際上是在做正確的事。 沒錯，不建議您在DOM中實際執行此操作，但是應該可以。 DOM加載的最大問題是主觀的。 某些瀏覽器會在內容放入后立即考慮加載正文，其他瀏覽器將等待圖像，而較舊的IE版本將無法全部啟動！ 因此，如果您使用推薦的window.onload ，那應該沒問題， 因為一旦DOM准備就緒 ，它將立即啟動 。 您可能要考慮的另一個大事件是DOMContentLoaded ，但是它沒有得到廣泛的支持。 還有更多內容（也可以通過單擊）： https : //developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

我還想補充一點，即使您將按鈕顯示出來，它也沒有內容，因此它可能顯示為空，或者如果您要重置按鈕樣式，則根本不會顯示。 要記住的事情。

解決方案2
 3  2014-11-18 09:00:37

您的代碼存在一些問題：

  • 如注釋中所述， document.body.onload應該替換為window.onload 。
  • 在onload函數中，您定義了一個函數，但是沒有調用它...

所以 

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

應替換為： 

window.onload = function up() { // Could be anonymous, of course, but should not
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

解決方案3
 0  2014-11-18 10:45:40

要回答您的問題“我的想法是當我向下滾動時，將出現UP按鈕。” 我認為你應該在可滾動容器div上注冊' scroll '事件。 “ body / window.onload”功能只會被觸發一次，因此無法滿足要求。 這是您可以繼續的方法（ 工作提琴 ） 

<div id="container" onscroll="handleScroll(this)">
    <button id="UP" onclick="toTop(350);">Go to Top</button>
     Scroll me</br>....scrollable content

Java腳本 

function handleScroll (obj) {
    var displayVal = "block";
    if (obj.scrollTop == "0") {
        displayVal = "none";
    }
    document.getElementById('UP').style.display = displayVal;
};

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 TypeError：document.body為null 未被捕獲的TypeError：無法將屬性&#39;onclick&#39;設置為null使用window.onload后無法正常工作 未捕獲到的TypeError：無法將屬性&#39;innerHTML&#39;設置為null，將腳本移至正文不起作用 為什么我的javascript中的document.body為null？ document.body為null 未捕獲的TypeError：無法將屬性&#39;onclick&#39;設置為null。 嘗試過window.onload JavaScript錯誤消息：未捕獲的TypeError：無法設置null的屬性&#39;onclick&#39; 未被捕獲的TypeError：無法將屬性&#39;innerHTML&#39;設置為null：javascript Javascript 未捕獲的類型錯誤：無法設置 null 的屬性“onclick” 未捕獲的類型錯誤：無法設置 null 的屬性“onclick”。 重疊 JavaScript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM