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>

回答

相关问题