無論如何我可以將這個javascript代碼放在head標簽中？

Question

我的形式中有很少的div，需要首先隱藏，即onLoad。 問題是，當我把它放入<head>標簽時，它將首先嘗試執行div給出值為null的錯誤，並且當我將其包含在表單下方時，它可以完美地運行。 例如

鑒於JS代碼放在下面，此代碼工作正常。

<div class="error" id="name_error"><p>Input Name</p></div>
<input type="text" id="name" name="name" class="input-text" value="Enter Name..."/>

<script type="text/javascript">
     document.getElementById('name_error').style.display = 'none';
</script>

當我嘗試將JS代碼放在上面時它不起作用。

無論如何我可以將JavaScript代碼放在head標簽中，它應該在頁面加載時隱藏div？

Answer 1

無論如何我可以將JavaScript代碼放在head標簽中，它應該在頁面加載時隱藏div？

您需要將代碼包裝在onload事件中：

window.onload = function(){
  document.getElementById('name_error').style.display = 'none';
};

這樣您就不會得到未定義的錯誤，因為當DOM與其他頁面資源一起可用時會觸發onload事件。

Answer 2

當然。 只需將其置於加載事件中，如下所示：

window.addEventListener("load", function() {
    document.getElementById('name_error').style.display = 'none';
}, false);

Answer 3

您可能想要考慮使用jQuery 。 以下是它的編寫方式。

$(function(){
    $('#name_error').hide();
});

$(function(){ }); 將在加載DOM后執行，類似於window.onload ，僅支持跨瀏覽器。

$('#name_error')就像是使用css選擇器語法的document.getElementById('name_error')的快捷方式。

.hide(); 是將style.display設置為'none'的快捷方式。

編輯：非jQuery窗口加載。

在我發布這個答案之后，我想起了Dustin Diaz關於最小的DOMReady代碼的帖子。 使用他的代碼，它看起來像這樣。

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    document.getElementById('name_error').style.display = 'none';
});

有關第1行的更多信息，請訪問http://www.dustindiaz.com/smallest-domready-ever/

Answer 4

我在這里錯過了什么嗎？ 為什么不將初始樣式設為'display：none'？ 而不是將其保留為默認值，然后立即隱藏它。

Answer 5

在window.load事件中將顯示設置為none可能會導致內容最初可見 - 在閃爍消失時閃爍。 但是，正如所指出的，您無法在呈現之前更改DOM元素的顯示。

一個好的方法是使用Javascript（你可以在頭部做）在html元素上添加（或刪除）一個類，並設置一個css規則，如果html標簽有類集，則隱藏你的元素。

請參閱：如何檢測瀏覽器JavaScript是否已關閉並顯示示例通知。

Answer 6

有不同的方法來推遲腳本的執行有很多答案，在評論中有一些爭議，所以我寫了一些DEMO來比較所有這些方法的真正差異，因為它們當然不是當量。

對於那些不想看到演示的不耐煩的人，這里有一些最重要的事情要記住為工作選擇合適的工具：

window.onload = function（）{...};

它適用於所有瀏覽器
它刪除了所有以前的處理程序
它只在加載所有圖像后才會觸發

window.addEventListener（“load”，function（）{...}）;

它在Internet Explorer中不起作用
它只在加載所有圖像后才會觸發

jQuery（document）.ready（function（）{...}）;

它適用於所有瀏覽器
一旦DOM准備好就會激活它

只是為了好奇，這就是jQuery實際上正在做的事情，以確保一旦DOM准備就緒並且跨瀏覽器工作就會解雇你的處理程序：

// Handle when the DOM is ready
ready: function( wait ) {
    // A third-party is pushing the ready event forwards
    if ( wait === true ) {
        jQuery.readyWait--;
    }

    // Make sure that the DOM is not already loaded
    if ( !jQuery.readyWait || (wait !== true && !jQuery.isReady) ) {
        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
        if ( !document.body ) {
            return setTimeout( jQuery.ready, 1 );
        }

        // Remember that the DOM is ready
        jQuery.isReady = true;

        // If a normal DOM Ready event fired, decrement, and wait if need be
        if ( wait !== true && --jQuery.readyWait > 0 ) {
            return;
        }

        // If there are functions bound, to execute
        readyList.resolveWith( document, [ jQuery ] );

        // Trigger any bound ready events
        if ( jQuery.fn.trigger ) {
            jQuery( document ).trigger( "ready" ).unbind( "ready" );
        }
    }
},

bindReady: function() {
    if ( readyBound ) {
        return;
    }

    readyBound = true;

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},

我將它展示為一個例子，如果你需要它可以在所有瀏覽器上運行而且如果某些圖像或廣告加載有延遲，那么像文檔就緒處理程序這樣的東西可能實際上非常復雜。

無論如何我可以將這個javascript代碼放在head標簽中？

問題描述

6 個解決方案

解決方案1
1 已采納 2011-03-01 06:13:07

解決方案2
1 2011-03-01 06:13:56

解決方案3
1 2011-03-01 07:00:02

解決方案4
1 2011-03-01 07:15:55

解決方案5
1 2011-03-01 07:46:22

解決方案6
1 2011-03-01 07:59:38

window.onload = function（）{...};

window.addEventListener（“load”，function（）{...}）;

jQuery（document）.ready（function（）{...}）;

無論如何我可以將這個javascript代碼放在head標簽中？

問題描述

6 個解決方案

解決方案1 1 已采納 2011-03-01 06:13:07

解決方案2 1 2011-03-01 06:13:56

解決方案3 1 2011-03-01 07:00:02

解決方案4 1 2011-03-01 07:15:55

解決方案5 1 2011-03-01 07:46:22

解決方案6 1 2011-03-01 07:59:38

window.onload = function（）{...};

window.addEventListener（“load”，function（）{...}）;

jQuery（document）.ready（function（）{...}）;

解決方案1
1 已采納 2011-03-01 06:13:07

解決方案2
1 2011-03-01 06:13:56

解決方案3
1 2011-03-01 07:00:02

解決方案4
1 2011-03-01 07:15:55

解決方案5
1 2011-03-01 07:46:22

解決方案6
1 2011-03-01 07:59:38