为什么不从头文件链接Javascript文件，但只有在html的结尾工作

Why doesn't linking Javascript files from header work but only at the end of the html works?

本文关键字：文件 html 结尾 工作 链接 Javascript 为什么不      更新时间：2023-09-26

我正在玩kinect .js，我注意到只有在body结束时链接我的javascript才能工作。通常不会在head中添加javascript会工作吗?

这是我的HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Tictactoe</title>
        <META http-equiv="Content-Script-Type" content="type">
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

这是我的javascript文件:

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 150,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});
// add the shape to the layer
layer.add(rect);
stage.add(layer);

这是因为它必须在运行之前加载HTML元素。尝试使用"onload()"函数来解决这个问题。

在不了解这个kinetic库的情况下，我的猜测是它不会等待页面加载以采取任何行动。因此，如果您将JS文件包含在页面的顶部，您的container还没有在DOM中。

可能脚本正在尝试使用DOMELement。因此，如果您的脚本在HEAD中，则BODY标记尚未加载。如果你把你的脚本放在BODY的末尾，BODY的内容已经被加载了。

所以如果你真的想在HEAD上加载，你应该在body上附加你的脚本。onloaded事件。

如果在页面头部引用DOM，则在运行代码时DOM还没有准备好。当Kinetic试图访问您的容器div时，它不可用。如果您检查控制台，您可能会看到一个错误。

在页面底部包含脚本可以保证在代码运行时DOM是可用的。查看这个stackoverflow线程以获得完整的解释。

用你的方法是完全可以接受的。参见使用相同技术的HTML5样板。或者，如果您打算将脚本包含在头部，则可以使用jQuery的document ready事件，该事件在DOM呈现之前不会触发。

试试这个:

window.onload=function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 150,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4  
});
// add the shape to the layer
layer.add(rect);
stage.add(layer);
}

您很可能遇到DOM尚未准备好但脚本已经尝试与元素交互的问题。

这就是为什么当脚本被添加到body标签的底部时，它会在添加元素后加载。

与其在body标签中添加脚本标签，不如将代码包装在window的onload事件中，以确保它只在DOM准备好后执行。

与此类似:

window.onload = function(){
    // ... your code here
}
上面的

将设置一个函数在窗口的load事件触发时调用。
如果您需要在不同的JavaScript文件中向事件添加多个函数，也可以像下面这样编写:

window.addEventListener('onload', function(){
    // ... your code here
})

load事件在文档加载过程结束时触发。在此时，文档中的所有对象都在DOM中图片和子帧已经加载完毕。

相关文章：