0

我正在尝试编写一些 javascript，但在这方面几乎没有经验。

我读过一些帖子，建议 <head> 中的 <script> 块保证在 <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: undefined”和 #2：“initMap：这是一个测试”，这表明后面的脚本首先被执行。

感谢您的帮助，
gs。

4

3 回答 3

5

您的第一个脚本首先被执行......但它所做的只是创建函数和变量。

然后，您在此处调用该函数：

<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-08T19:06:07.800 回答
0

问题是在加载主体时调用您的函数initMap（body onload='...'），但仅在加载最后一个脚本并因此执行时才完全加载主体。您正在混淆加载 javascript 并执行它。

于 2013-03-08T19:06:06.127 回答
-1

如果您希望立即执行 head 块中的函数，只需在其定义下方调用它即可。如果该函数使用了一些控制值，那么您需要将其包装在 document.ready 块中。

理想情况下，在 CMS 场景中，header 中立即调用的函数将用于一般初始化，body 中的函数应该有一个包装器作为 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-15T15:37:01.590 回答