js文件不生效

最新推荐文章于 2023-07-09 10:50:57 发布

NO0b

最新推荐文章于 2023-07-09 10:50:57 发布

阅读量5.7k

点赞数 8

分类专栏： JavaScript 文章标签：前端 defer 推迟脚本执行 JS

本文链接：https://blog.csdn.net/q5706503/article/details/82961226

版权

23 篇文章 0 订阅

订阅专栏

新手第一次用引入js经常不起作用 , 明明没有拼写错就是没作用,多半把<script>放在了head里,

浏览器解析到<script>元素时会停止继续解析, 开始下载js脚本文件并执行,

但问题是这时候浏览器没解析到body部分,dom操作获取不了元素 , 所以js执行了但没成功获取元素,修改失败了

这时候就要用到defer属性推迟脚本执行

script元素的defer属性会告诉浏览器页面载入之后解析完才会执行<script.../>脚本中的内容,

我们来看看这玩意有啥用:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="defer.js" >
	</script>
</head>
<body>
	<div id="target"></div>
</body>
</html>

上面只定义了一个div并引入了js文档, 下边是js:

var tg=document.getElementById("target");
tg.innerHTML="js脚本生效!";

作用就是把空div里显示一串字:js脚本生效!

我们执行这个HTML文件后发现一片空白

说明JS并没有产生预期效果, 因为浏览器解析到<script>元素时会停止继续解析, 开始下载js脚本文件并执行,

但问题是这时候浏览器没解析到div部分并不知道这个id是target的东西是啥 , 所以js执行了但没成功获取元素,修改失败了

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

再刷新就能正常显示了:

因为defer属性会告诉浏览器页面载入之后解析完才会执行<script.../>脚本中的内容,

就这两行js我干嘛非写成外部脚本文件?

因为defer属性只对外部脚本文件起作用!

NO0b

关注