jQuery腳本在HTML5 Boilerplate文件中的位置？

H5BP是否假設您將編寫JavaScript和jQuery代碼，以便它僅在窗口完全加載（使用onload監聽器）時執行？我問的原因是H5BP在body標籤的底部定位了jQuery包含腳本標籤，如下所示。然而，除非我將jquery.min.js腳本元素移動到主體前面的head元素（並因此執行cookie腳本），否則設置cookie的腳本將不起作用。謝謝。jQuery腳本在HTML5 Boilerplate文件中的位置？

<!DOCTYPE html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 
     <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
    </head> 
    <body> 
     <p>This is HTML5 Boilerplate.</p> 

     <!-- Cookie isn't set when jquery.min.js follows this element block --> 
     <script> 
      var test_profile = { browserWidth: $(window).width() }; 
      document.cookie = "test_profile=" + JSON.stringify(test_profile); 
     </script> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 
    </body> 
</html>

來源

2013-06-12 William

即第一<script>塊取決於jQuery的（$(window).width()），所以jQuery的已被加載之前，不能使用。

只需推動該cookie腳本其他兩個<script>塊後：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 

<script> 
    var test_profile = { browserWidth: $(window).width() }; 
    document.cookie = "test_profile=" + JSON.stringify(test_profile); 
</script>

來源

2013-06-12 20:57:17 Blender

有道理。謝謝，B。 – William

jQuery腳本在HTML5 Boilerplate文件中的位置？

回答

相關問題