javaScript放在<head>和<body>的区别

最新推荐文章于 2022-12-22 15:09:15 发布

liminhappygirl

最新推荐文章于 2022-12-22 15:09:15 发布

阅读量310

点赞数

分类专栏： JAVAScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/liminhappygirl/article/details/84415176

版权

JAVAScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

javaScript放在<head>和<body>的区别：

在HTML body部分中的JavaScript会在页面加载的时候被执行。
在HTML head部分中的JavaScript会在被调用的时候才执行。

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

由于在页面中总是难免javascript脚本语言，在代码中看到body里可以放<script type=”text/javascript”>脚本，而head里也可用<scripttype=”text/javascript”>脚本，想要用好他们，就得了解他们的区别，经过自己的总结发现他们的区别如下：
一、在head主体里写，如果有方法体，那么就是在客户点击的时候触发，如果没写方法体，比如引入的js文件，那么在加载页面前就预加载了。
二、写在body主体里，是为了实现某些部分动态地创建文档。这里比如制作鼠标跟随事件，肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果等。这个是在页面加载的时候加载。
二、会与body和head标签顺序有关。比如下面代码：
<html>
<body>
<script type="text/javascript">
alert("in body");
</script>
</body>
<head>
<script type="text/javascript">
alert("in head");
</script>
</head>
</html>

结果是先弹出body，再弹出head.
如果改下代码结果就截然相反了，例
<html>
<head>
<script type="text/javascript">
alert("in head");
</script>
</head>
<body>
<script type="text/javascript">
alert("in body");
</script>
</body>
</html>
执行时得考虑javascript执行顺序

说明：

1、页面加载的时候是从上往下执行的，即先执行<head>再执行<body>。

2、一般这样写：<script type="text/javascript">；如果这样写：<script language="javascript">是不标准的，IE能认，但是别的就不知道了。

3、<script type="text/javascript">一般情况下都放在<head></head>里面，便于管理。
这样也能保证在显示页面之前，所有的javascript代码已经经过解析了。
放在head里<script>始终是被执行的。
一般来说，脚本最好放在<head>标签中，但是有时候脚本初始化要用到<body>当中的节点，由于当<head>加载时<body>是未被加载的，所以引致脚本运行出错，以下为错误代码：
<html>
<head>
<script type="text/javascript">
alert("body's id = "+document.body.id);
</script>
</head>
<body id="test">
</body>
</html>

错误：alert消息框未被弹出
方法1:在<script>标签处要加一个defer参数，使<script>中的代码延时执行，在页面加载完成后才被执行
<html>
<head>
<script defer type="text/javascript">
alert("body's id = "+document.body.id);
</script>
</head>
<body id="test">
</body>
</html>
方法2:而另一种做法就是将<script>放到<body>后面
<html>
<head>
</head>
<body id="test">
</body>
<script type="text/javascript">
alert("body's id = "+document.body.id);
</script>
</html>

这样其实是同样道理，就是在加载完<body>后再加载<script>的内容
方法3:当然也可以用window.onload来延时执行，这里暂时不作介绍

liminhappygirl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript放在<head>和<body>的区别

javaScript放在和的区别：在HTML body部分中的JavaScript会在页面加载的时候被执行。在HTML head部分中的JavaScript会在被调用的时候才执行。head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。body 部分中的脚本: 当页面被加...
复制链接

扫一扫

专栏目录