html引入外部js失效不起作用的解决办法

最新推荐文章于 2024-12-27 16:05:03 发布

风落_

最新推荐文章于 2024-12-27 16:05:03 发布

阅读量1.8w

点赞数 37

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/qq_45523411/article/details/119063696

版权

前端学习专栏收录该内容

4 篇文章

订阅专栏

本文探讨了为何通过script标签在<head>中引入外部JS可能导致代码失效，并提供了将JS移到<body>后的解决方案。核心内容是理解页面加载顺序对JS执行的影响，以及如何确保JS在适当时机执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

通过script标签外部引入javascript文件，但不起作用，js代码失效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录</title>
		<script src="js/main.js" type="text/javascript"></script>
	</head>
	
	<body>
		<form action="XXXXXX" method="post" name="login">
			账号：<input type="text" name="username" id="username" /> <br>
			密码：<input type="password" name="password" id="password" /> <br>
			<input type="submit" name="login" id="login" value="登录"/>
			<input type="button" name="logon" id="logon" value="注册" />
		</form>
	</body>
</html>

原因分析：

html代码的执行顺序是从上到下的，浏览器由上至下解析html代码，如果在head里面引入js，可能会导致js执行时，页面标签还未加载，导致js找不到作用对象，从而失效

解决方案：

在body后面引入外部js文件即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录</title>
	</head>
	
	<body>
		<form action="http://42.192.60.64:8080/user" method="post" name="login">
			账号：<input type="text" name="username" id="username" /> <br>
			密码：<input type="password" name="password" id="password" /> <br>
			<input type="submit" name="login" id="login" value="登录"/>
			<input type="button" name="logon" id="logon" value="注册" />
		</form>
	</body>
	
	<script src="js/main.js" type="text/javascript"></script>
</html>