Javascript in <head>在腳本之前執行<body>

我正在嘗試寫一點JavaScript，但幾乎沒有這方面的經驗。Javascript in <head>在腳本之前執行<body>

我讀過的帖子表明<腳本> <頭>內塊保證那些<身體>之前運行，但我看到完全相反的行爲。有人可以向我解釋爲什麼我看到這個？

這是我的簡單的測試頁：

<html> 
    <head> 
    <script type="text/javascript"> 
    var test_msg; 
    function initMap() { 
     test_msg = "This is a test"; 
     window.alert('initMap: ' + test_msg); 
    } 
    </script> 
    </head> 
    <body onload="initMap()"> 
    <script type="text/javascript"> 
     window.alert('blargo: ' + test_msg); 
    </script> 
    </body> 
</html>

當我加載此（在任一Firefox或IE）我看到2個消息框：＃1：「blargo：未定義」，和＃2：「initMap ：這是一個測試「，暗示後面的腳本首先被執行。

感謝您的幫助，
gs。

來源

2013-03-08 Guy Smiley

你的第一個腳本首先被執行......但它所做的只是創建函數和變量。

那麼你在這裏調用該函數：

<body onload="initMap()">

....這就保證了功能將不會被調用，直到所有的文件資源已加載。

所以代碼執行的總體順序是：

// first script 
var test_msg; 
function initMap() { 
    test_msg = "This is a test"; 
    window.alert('initMap: ' + test_msg); 
} 


    // second script 
window.alert('blargo: ' + test_msg); 


    // function call via window.onload 
initMap();

來源

2013-03-08 19:06:07

謝謝大家對你快速回復。這似乎是反直覺之前，但現在我明白了。 :) – 2013-03-08 19:25:20

的事情是，加載身體的時候你的函數initMap被調用時，你的最後一個腳本被加載，從而執行（body onload='...'）但身上只有完全加載。你正在加載JavaScript並執行它令人困惑。

來源

2013-03-08 19:06:06 benzonico

-1

如果你希望你的頭塊功能必須立即執行的，只是把它的定義如下。如果該函數使用了一些控制值，則需要將其包裝在document.ready塊中。

在CMS場景

理想的情況下，在標題中直接調用的函數將被用於一般的初始化，那些身體應該有一個包裝器的document.ready有所有控件初始化

<head> 
<script> 
function Initialize() { doSomething } 

// Now call this explictly 
Initialize(); 
</script> 
</head> 
<body> 

... body elements 

<script> 
$(document).ready(function() { 
    handle body's element as desired using various functions 
} 
</script> 

</body>

來源

2017-06-15 15:37:01 Nitin

這......不回答問題......並拋出一個引用錯誤，因爲'$'未聲明。 – Quentin 2017-06-15 15:40:01

你使用jQuery嗎？ $來自那裏。如果不是，那麼在標記中包含來自jQuery cdn的引用 – Nitin 2017-06-15 16:30:11

@Nitan - 提問（4年前！）的人不是。 – Quentin 2017-06-15 16:30:46

Javascript in <head>在腳本之前執行<body>

回答

相關問題