html文件中script标签放在哪里?

最新推荐文章于 2025-06-09 18:11:11 发布

原创最新推荐文章于 2025-06-09 18:11:11 发布 · 2.5w 阅读

68 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #script #onload

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了HTML中JS脚本的不同放置位置及其影响，详细分析了<head>和</body>前的脚本执行时机，通过实例演示如何实现页面元素加载后的脚本执行。

该文章已生成可运行项目，

首先说选择，常见的位置有两个，一个位置是<head>标签里面，另一个是body标签快结束的地方，也就是</body>上面。

然后说结论，一般情况下都可以放。区别嘛可以看个例子(scriptlocation.html):

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
	
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" onclick="btnClick();">
</body>
</html>

这是一个最简单点击按钮弹窗的Demo，此时我们给<input>标签添加了onclick事件并添加了btnClick方法。这种情况下是没有问题的。但是如果来个新需求:修改btn按钮的绑定事件，初步修改代码如下:

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
		document.getElementById("btn").onclick = function() {
				alert('hello777!');
			};
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" onclick="btnClick();">
</body>
</html>

可是这样那个下面的绑定的匿名函数并没有发挥作用，结果还是HelloWorld!。这就是写在<head>标签里的问题:在页面DOM元素加载完之前，js脚本就已经执行完了。所以最后绑上的还是btnClick()，这也侧面说明这个位置的js适合做一些全局定义且后期不怎么变化的事情。

你可能会觉得把οnclick="btnClick();"去掉不就行了吗？那你可以试试，看有什么效果，就明白为什么了。

接下来就可以试试第二个位置:

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" onclick="btnClick();">
	<script type="text/javascript">
		document.getElementById("btn").onclick = function() {
				alert('hello777!');
			};
	</script>
</body>
</html>

效果拔群，因为这个位置的js就是等页面元素加载完才执行的。

最后，如果只想写在head里而又想达到这个效果，那么可以试试把代码写进onload事件中(简单理解就是等页面加载好的一个事件)，使其成为内嵌函数。

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
		onload = function() {
				document.getElementById("btn").onclick = function() {
				alert('hello777!');
			};
		}
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" onclick="btnClick();">
</body>
</html>

本文章已经生成可运行项目