[转]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 ...
随机推荐
- 如何快速把安卓应用移植到BlackBerry 10上
如何快速把安卓应用移植到BlackBerry 10上 相关博客: BlackBerry相关文档 http://developer.blackberry.com/android/documentatio ...
- Android -- 图像处理(信息量超大)
Android的图像处理提供的API很帮,但是不适合用来写游戏,写游戏还是用专门的引擎比较好. Android的图像处理还有3D的处理的API,感觉超屌. 我先分享一下Android的一般的处理,比如 ...
- 在centOS上安装VNC
步骤如下: 1.搜寻VNC Server [root@msg45 wasliberty]# yum search tigervnc-serverLoaded plugins: fastestmirro ...
- WCF 之 已知类型(KnownType)
已知类型(Known types)允许在服务契约中使用多态的行为,在服务操作中暴露基本类型.将已知类型(known types)相关到基本类型(基类类型)自身;特定操作;整个服务契约采用属性声明或者配 ...
- 【转】如何成为Python高手
http://www.aqee.net/how-to-become-a-proficient-python-programmer/ 这篇文章主要是对我收集的一些文章的摘要.因为已经有很多比我有才华的人 ...
- MQTT---HiveMQ源代码具体解释(十八)Cluster-kryo与Serializer
源博客地址:http://blog.csdn.net/pipinet123 MQTT交流群:221405150 既然是Cluster,node之间肯定是须要交互的,那么肯定是须要序列化和反序列化.Hi ...
- (转)android适配各种分辨率的问题
Android设备屏幕的尺寸是各式各样的,如小米是4英寸的,Xoom平板是10英寸:分辨率也千奇百怪,800×480,960×540等:Android版本的碎片化问题更是萦绕于心,不过在设计应用时可以 ...
- SecureCRT 常用配置
1.SecureFx 中文乱码,应设置成utf-8编码了,依旧乱码 在 C:\Users\root\AppData\Roaming\VanDyke\Config\Sessions 下找到对应的sess ...
- 为什么我没有拔出钥匙 ——开锁引发的程序bug解决方案的思考
http://blog.csdn.net/wojiushiwo987/article/details/8851204为什么我没有拔出钥匙 ——开 ...
- QQ在通信与传输的一些知识
http://www.nowamagic.net/librarys/veda/detail/2028 一.登录 不管UDP还是TCP,最终登陆成功之后,QQ都会有一个TCP连接来保持在线状态.这个TC ...