html引入js和css问题

最新推荐文章于 2024-02-17 18:46:21 发布

starandsea

最新推荐文章于 2024-02-17 18:46:21 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/starandsea/article/details/42077675

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

引入js文件不能用缩写。

不能写成：

这样可能会导致解析失败，后面的js就不执行了。

引入css文件可以用完整写法也可以用缩写。

aa.js的代码为：

function f() {
	alert(1);
}

aa.css的代码为：

body{
	COLOR:#AA0000;
	background:#ccffdd;
}

引入js和css文件的html为：

<html>
<head>
<script type="text/javascript" src="aa.js"></script>
<link rel="stylesheet" type="text/css" href="aa.css"/>
</head>
<body οnlοad="f();">
</body>
</html>

直接在html中嵌入js和css块的html为：

<html>
<head>
<script>
function f() {
	alert(1);
}
</script>
<style>
body{
	COLOR:#AA0000;
	background:#ccffdd;
}
</style>
</head>
<body οnlοad="f();">
</body>
</html>

bb.js的代码是：

function f2() {
	alert(2);
}

如果html文件写成：

<html>
<head>
<script type="text/javascript" src="aa.js"/>
<script type="text/javascript" src="bb.js"></script>
</head>
<body οnlοad="f2();">
</body>
</html>

是不会弹出2的，而如果onload写成"f();"还是会弹出1的，说明js错误的写成简写的话，当前引入的js文件还是可以引入的，后面的就不行了。

同样的，html写成

<html>
<head>
<script type="text/javascript" src="aa.js"></script>
<script type="text/javascript">
function f2() {
	alert(2);
}
</script>
</head>
<body οnlοad="f2();">
</body>
</html>

也是不会弹出2的。

引入js文件的顺序是无所谓的，除非引入的文件在声明的时候就用到了其他的文件。

比如aa.js中定义了一个Object变量，window.user={name: 'xiaoming',age: 20};而bb.js中直接使用了window.user.name,那么就要把aa.js在bb.js之前引入。

而如果bb.js中是这么使用window.user的：

function dealUser() {
	alert(window.user.name);
}

那么引入的顺序就无所谓了。

嵌入代码块和引用js文件的顺序跟引入多个js文件之间的顺序是一样的。

对于上面引入js文件用了缩写的情况，如果缩写的是最后一个引入的js：

<html>
<head>
<script type="text/javascript" src="aa.js"></script>
<script type="text/javascript" src="bb.js"/>
</head>
<body οnlοad="f();">
</body>
</html>

这样是可以弹出1的。

但是如果是js代码块和引入js文件混搭而引入的js又缩写了：

<html>
<head>
<script type="text/javascript">
function f() {
	alert(1);
}
</script>
<script type="text/javascript" src="bb.js"/>
</head>
<body οnlοad="f();">
</body>
</html>

这样是不会弹出1的。

js的执行顺序是没有问题的，先定义了f，后定义了f2，整个html跑完的时候window也是有f这个方法的，所以问题是出在body加载完成后并没有执行f，而同样是放在缩写的js引入后，上面引入两个js文件的却可以，具体是什么逻辑就不晓得了。