zoukankan      html  css  js  c++  java
  • [转]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来延时执行,这里暂时不作介绍

  • 相关阅读:
    HttpUtils
    其实就是这么回事
    Spring 、 CXF 整合 swagger 【试炼】
    Jetty 学习记录
    WebSphere 学习记录
    Apache 学习记录
    WebLogic 学习记录
    Hessian 学习记录
    IntelliJ IDEA学习记录
    IntelliJ IDEA学习记录
  • 原文地址:https://www.cnblogs.com/qrlozte/p/3503356.html
Copyright © 2011-2022 走看看