浏览器对<body>内的<script>的反应不同
这是我无法理解的问题.看看这个JS代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>The Beginning...</p>
<script>
alert('Hello, Wolrd!');
</script>
<p>...The End Of Doc</p>
</body>
</html>所以问题是我不明白为什么The Beginning在<script>标签之前没有加载/可见段落.在几乎所有的教程中,它解释了浏览器在满足脚本之前加载所有HTML,然后当脚本满足时,浏览器开始在脚本的编译模式下工作,然后当脚本结束时,浏览器以HTML模式返回.
但实际上它似乎表现不同,因为The Beginning文本仅在脚本警报后出现:
可以请某人解释为什么会发生这种情况？
PS:只有Firefox的行为与教程中描述的相同.
小智 -2
因为 JavaScript 在 DOM 完成解析之前立即执行（这就是准备解决的“问题”）。您可以包含一个事件侦听器来检查您的 DOM 是否准备好
<script>
var callback = function() {
alert( 'Hello, Wolrd!' );
};
if(document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
</script>
但您可以做的最简单的事情是将<script>标签移到之前的末尾</body>。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>The Beginning...</p>
<p>...The End Of Doc</p>
<script>
alert( 'Hello, Wolrd!' );
</script>
</body>
</html>