JavaScript在JSP页面加载与执行顺序

系统管理员 2022-04-03 11:11 337阅读 0赞

首先看下js在在jsp页面中可能的情况

![SouthEast][]

jsp中的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
    <script type="text/javascript">
        console.log("it is before !DOCTYPE html");
    </script>
    <!DOCTYPE html>
    <script type="text/javascript">
        console.log("it is before html");
    </script>
    <html>
    <script type="text/javascript">
        console.log("it is in html before head");
    </script>
    <head>
        <script type="text/javascript" src="../ext-res/js/jquery.min.js"></script>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="format-detection" content="telephone=no">
        <script type="text/javascript">
            console.log("it is in head");
    
            /**
             * 此处仅仅声明函数，并未调用
             * @param type
             */
            function pages(type){
                console.log(type);
            }
    
            // 在body的onlaod调用之前调用
            $(function(){
                pages("pages in head");
            });
        </script>
    </head>
    
    <script type="text/javascript">
        console.log("it is after head before body");
    </script>
    
    <body onload="pages('pages in body-onload')">
    
    <h2>Hello World!</h2>
    <script type="text/javascript">
        console.log("it is in body");
        // 第一次操作pageNow组件，此时组件还没加载，操作失败
        $("#pageNow").attr("value","12");
        console.log($("#pageNow").val());
        console.log("it is in body");
    </script>
    <div>
        <span class="testls">test link script</span>
    </div>
    <input type="hidden" id="pageNow" value=""/>
    </body>
    
    <script type="text/javascript">
        console.log("it is after body before </html>");
        // 第二次操作pageNow组件，此时组件已加载，操作成功
        $("#pageNow").attr("value","12");
        console.log($("#pageNow").val());
        console.log("it is after body before </html>");
    </script>
    
    </html>
    
    <script type="text/javascript">
        console.log("it is after </html>");
    </script>

## **【2】加载顺序** ##

浏览器执行html代码是自上而下的线性过程，`<script>`作为html代码的一部分同样遵循这个原则！所以如果js中需要对jsp中的组件做操作，那么应该是先有组件，而后操作该组件，否则会操作失败。

## **【3】执行顺序** ##

JS会在会在页面加载的时候被执行。但是存在两个特殊点：

1上面实例head中$()的调用，如下

// 在body的onlaod调用之前调用
    $(function(){
        pages("pages in head");
    });

2body的onload的调用

调用实际效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70][]

**说明：onload方法是javascript中的方法，而$(function()\{\})是jquery的方法**

![Center][]

[SouthEast]: /images/20220403/b54165a9f6304fffa4c19b035c2e6ade.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70]: /images/20220403/08d75f7898314f66bf5ef615bf4af90c.png
[Center]: /images/20220403/11096d8d1c74466b8790216281a50bf1.png