Question

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

我看过帖子，提示＆lt; script＆gt; ＆lt; head＆gt;内的块保证在＆lt; body＆gt;中的那些之前运行，但我看到完全相反的行为。有人可以向我解释为什么我会看到这个吗？

这是我的简单测试页面：

<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

Answer 1

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

然后你在这里调用函数：

<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();

Answer 2

事情是你的函数initMap在加载正文时被调用（body onload='...'）但是只有当你的最后一个脚本被加载并执行时才会完全加载正文。您正在混淆加载JavaScript并执行它。

Answer 3

如果您希望立即执行head block中的函数，只需在其定义下面调用它。如果函数使用某些控制值，则需要将其包装在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>

Javascript在脚本之前执行

3 个答案: