html引入js和css問題

引入js文件不能用縮寫。

<script type="text/javascript" src="inc/aa.js"></script>

不能寫成:

<script type="text/javascript" src="inc/aa.js"/>

這樣可能會導致解析失敗,後面的js就不執行了。


引入css文件可以用完整寫法也可以用縮寫。

<link rel="stylesheet" type="text/css" href="inc/aa.css"></link>

<link rel="stylesheet" type="text/css" href="inc/aa.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文件的卻可以,具體是什麼邏輯就不曉得了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章