1. 外部js失效的原因:
最主要的原因就是我们忽略了一个html代码的执行的顺序,从上到下,从左到右.
平常我们引入一个外部的js代码,通常会把它放到head的最后面.这样就会导致,代码从上到下执行的时候,由于js在body的上面,所以先执行js代码,等js代码执行完毕之后再执行后面的body里面的代码.我们很多的js代码操作的对象都是页面标签,而页面标签此时还没有加载,这样就会导致再执行js的时候,找不到页面标签对象,故js失效了.
所以说解决的方案就是等页面的标签元素加载完毕之后再执行外部js的代码.
2. 解决方案一:在body的后面引入外部js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
</body>
<script src="index.js"></script>//在body的后面引入外部js
</html>
3. 解决方案二:将所有的js代码放到window.οnlοad=function(){}里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
外部index.js文件
window.οnlοad=function(){
//所有的外部js代码
}
onload是window的方法,等页面元素加载完毕之后触发该事件.
这样写的话,执行到index.js的时候就不会立即执行里面的代码了,而是等页面的所有的元素执行完毕之后,再执行外部js里面的所有的代码.
这样就不会导致index.js里面的代码因页面没有加载完毕而找不到页面标签了.
版权声明：本文为qq_45064049原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。