html中script的位置导致的js不能正常执行问题

最新推荐文章于 2025-04-27 00:02:51 发布

原创最新推荐文章于 2025-04-27 00:02:51 发布 · 2.5k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web学习

本文记录了写网页时因JS引入位置导致的低级错误。HTML文件从上到下执行，若在head中引入JS，会提前执行，无法找到要操作的标签id。解决方法有将JS引入位置后置，或在JS中用window.onload，还可使用script标签的defer或async属性。

前言

今天写网页，犯了一个刚学h5时容易犯的低级错误，记录一下。

情景

问题代码：
不用看代码的内容，看js的引入位置即可。这两个文件在同一目录下js文件名为1.js。
html代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--js文件在此引入-->
    <script src="1.js"></script>
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
</body>
</html>

js代码：

var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
var pas = Math.PI*2/5;
var i=0;
ctx.beginPath();
ctx.moveTo(150, 10);//绘制的起点

var id = setInterval(function(){//圆心位置(150,110)
    i += 2;
    if(i > 10){
        clearInterval(id);
    }
    ctx.lineTo(150 + 100 * Math.cos(i*pas-Math.PI/2), 110 + 100 * Math.sin(i*pas-Math.PI/2));
    ctx.strokeStyle = "red";
    ctx.stroke();
},200)

这段代码的js可以执行吗？答案是不能。运行结果及报错截图如下。
在这里插入图片描述
那么改变一下js的位置呢。
html代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
    <!--js文件在此引入-->
    <script src="1.js"></script>
</body>
</html>

运行结果截图
在这里插入图片描述
丝滑运行。

原因分析

为什么会出现这种状况呢？
我们知道html文件是从上到下执行的。如果在head中引入js文件，那么js的执行会提前于body标签内容执行，导致js不能找到要操作获取的标签id。最终导致js文件执行出错。
而将js在body底部或外面引入则可以运行，理论上讲只要你引入js文件的位置在你要获取id的标签后面执行就没有问题。

问题解决

可以向上面那样将js的引入放到后面。但一些有强迫症的朋友可能就想将它放在head里，当然这也不是不可以实现的。
第一种方法： 需要在你的js文件中使用window.onload = function(){}来等待html加载完成再解析js了。示例如下。
js代码：

window.onload = function(){//html加载完成后执行
    var mycanvas = document.getElementById("mycanvas");
    var ctx = mycanvas.getContext("2d");
    var pas = Math.PI*2/5;
    var i=0;
    ctx.beginPath();
    ctx.moveTo(150, 10);//绘制的起点

    var id = setInterval(function(){//圆心位置(150,110)
        i += 2;
        if(i > 10){
            clearInterval(id);
        }
        ctx.lineTo(150 + 100 * Math.cos(i*pas-Math.PI/2), 110 + 100 * Math.sin(i*pas-Math.PI/2));
        ctx.strokeStyle = "red";
        ctx.stroke();
    },200)
}

第二种方法： 使用script标签的defer属性，此属性会延迟js代码的执行。只有当html文件加载完成后才会执行js。（注意只有js为外部引入时才有效）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--js文件在此引入-->
    <script src="1.js" defer></script>
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
</body>
</html>

第三种方法： 使用script标签的async属性，此属性会异步加载js代码，不会因为执行js而使HTML渲染进入阻塞。（注意只有js为外部引入时才有效）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--js文件在此引入-->
    <script src="1.js" async></script>
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
</body>
</html>

标签

#js #javascript #html