[转]JavaScript放在<head>和<body>的区别
原文:http://liminhappygirl.iteye.com/blog/1841360
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来延时执行,这里暂时不作介绍
[转]JavaScript放在<head>和<body>的区别的更多相关文章
- javaScript放在head和body的区别
JavaScript写在哪里? 内部:Html网页的<body></body>中: 内部:Html网页的<head></head>中: 外部:外部js文 ...
- javascript 代码放在head和body的区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...
- JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
- JavaScript中:表达式和语句的区别
JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...
- 浅谈Java和JavaScript中变量和数据类型的区别
对于一门编程语言的学习,如果第一步是安装环境,那么第二步一定是学习这门语言的基本规则,变量和数据类型则首当其冲 JavaScipt作为一个蹭Java热度而命名的语言,在很多方面和Java也有一定的相似 ...
- 谈谈javascript放在哪里更合适
关于javascript放在哪里更合适 脚本位置: 例如以下代码: <html> <head> <title>Script Example</title&g ...
- JavaScript返回上一页代码区别
JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:win ...
- JavaScript代码放在head和body的区别(QRCode生成)
1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始. 2.在body中时,直接加载并执行 典型的区别: 如果有不在函数中的执行语句,比如变量初始化,如果在hea ...
- javascript的window.ActiveXObject对象,区别浏览器的方法
(window.ActiveXObject)的作用,用来判断浏览器是否支持ActiveX控件,如果支持ActiveX控件,我们可以利用var xml=new ActiveXObject("M ...
随机推荐
- [Todo]对于thrift和protobuf比较好的描述
比较跨语言通讯框架:thrift和Protobuf 全部thrift protobuf 前两天想在微博上发表一个观点:在现在的技术体系中,能用于描述通讯协议的方式很多,xml,json,protobu ...
- (剑指Offer)面试题41:和为s的两个数字
题目: 输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s,如果有多对数字的和等于s,输出任意一对即可. 思路: 1.枚举 固定一个数字,然后依次判断数组中该数字后面的数字与 ...
- eclipse 如何忽略js文件报错
本文翻译自:http://stackoverflow.com/questions/10254922/jquery-mobile-1-1-0-min-triggers-errors-in-eclipse ...
- Flutter 动画使用
旋转动画 透明度变换动画 在Android中,可以通过View.animate()对视图进行动画处理,那在Flutter中怎样才能对Widget进行处理 在Flutter中,可以通过动画库给wid ...
- myeclipse报异常:java.lang.OutOfMemoryError: Java heap space
- js slice 参数为负值
示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- profiler跟踪事件存为表之后性能分析工具
使用profiler建立跟踪,将跟踪结果存到表中,使用下面存储过程执行 exec temp_profiler 'tra_tablename'对表数据进行处理归类,然后进行性能分析 1.先建存储过程 2 ...
- 【Oracle】查看死锁与解除死锁
1.查询死锁的进程(下面2条语句均可用) 语句1: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.obj ...
- myeclipse2014安装jad反编译插件
myeclipse上默认不能查看class文件,需要查看的话安装反编译插件 安装步骤: 准备图中框里的两个文件 1. [net.sf.jadclipse_3.3.0.jar]文件拷贝到如下路径([D: ...
- PHP Token(令牌)设计应用
转自:http://my.oschina.net/u/912810/blog/358973 <?php class GEncrypt { protected static function ke ...