频道栏目
首页 > 程序开发 > Web开发 > Jsp > 正文
如果jsp页面中include(被包含)被包含的页面中有加载事件,那window.onload事件到底什么时候执行,会执行几次?
2018-05-11 11:25:53      个评论    来源:囧囧的专栏(czh)  
收藏   我要投稿

(有个疑惑,如果jsp页面中include(被包含)被包含的页面中有window.onload事件,那window.onload事件到底什么时候执行呢?)如果同一个页面(被包含)include多次,那该被包含的页面中的window.onload事件到底什么时候会执行,到底会被执行几次?

大家注意:

(有个疑惑,如果是include(被包含)被包含的页面中有onload事件,那window.onload到底什么时候执行呢? 如果该页面被包含多次,那onload事件到底会执行几次?)

用火狐浏览器调试跟踪一下include(被包含)被包含的页面,跟踪一下include(被包含)被包含的页面是怎么动态变化的,看 看window.onload事件到底什么时候执行呢?) 如果同一个页面include(被包含)多次,那该被包含的页面中的window.onload事件到底会被执行几次?

经过自己用火狐浏览器调试跟踪,测试得出结论,如果该页面include(被包含)多次,onload事件只会执行1次!而且是等整个网页全部都加载完毕 后再执行onload事件,(比如说,把a.jsp包含进index.jsp中,而且是把a.jsp包含进index.jsp中3次,如果a.jsp页面中有onload事件,那 么onload事件只会执行1次,不会执行3次,并且是在整个index.jsp页面都加载完后执行onload事件)。所以在a.jsp这个被包含的页面中写 了onload事件,而你的onload事件中的代码写的是document.getElementById("元素id");那么,等整个index.jsp页 面都加载完后执行onload事件时,就只能获取到第一个a.jsp(被包含进来的页面)页面上的元素,后面的第2次和第3次被包含进来的a.jsp页面上的元素是获 取不到的,因为document.getElementById("元素id");这句话,只能获取到一个元素,a.jsp页面被包含进index.jsp页面中3次, 也就是说index.jsp页面中有3个id一样的元素,那么document.getElementById("元素id");这句话只能获取到一个元素,也就是最前面的那 个元素(即第一个元素),所以也就导致了获取不到后面那2个元素。如果a.jsp页面被包含多次,你想获取到a.jsp(被包含页面)页面上的某个元素,最好是使 用document.getElementsByName("元素name");这样不管a.jsp页面被包含几次,都可以毫无遗漏的获取到你要找的元素,具体可以参 考我写的toDesktop.jsp这个页面(顺便提醒下,Html中,元素的id不要一样,因为id一般都是唯一的,id设置成一样,在Html语法上不会报错,但是很不规范, 所以id不要设置成重复的,name属性可以有重复的!)

testInclude.jsp页面

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"  

    pageEncoding="utf-8"%>  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

<title>测试include动作和指令</title>  

</head>  

<body>  

<center>  

    经过自己简单的测试了一下,include动作和指令的导入页面的路径加/斜杠或者不加/斜杠都可以  

    <br>  

    include动作-jsp:include page="/SaveData2" 和 jsp:include page="SaveData2"都可以<br>  

    include指令-@include file="/hyperLinkList.jsp" 和 @include file="hyperLinkList.jsp"都可以<br>  

    </center>  

    <pre style="font-size: 16px;">  

    大家注意:jsp:include page="/SaveData2"这行代码放在jsp:include page="/hyperLinkList.jsp"和  

    @include file="/hyperLinkList.jsp"这2行代码前面的话,那么这3种include都会有数据,  

    如果,jsp:include page="/SaveData2"这行代码放在jsp:include page="/hyperLinkList.jsp"和  

    @include file="/hyperLinkList.jsp"这2行代码后面的话,那么只有jsp:include page="/SaveData2"这  

    种include有数据,其他2种类没有数据  

    如果不要jsp:include page="/SaveData2"这行代码的话,只保留jsp:include page="/hyperLinkList.jsp"和  

    @include file="/hyperLinkList.jsp"这2行代码的话,那么这2种include都会没有数据,大家可以想想为什么?提  

    示下,可以想想jsp最终是要转译成Servlet的,大家可以去看看转译后的Servlet代码就知道了,转译后的Servlet代码在  

    tomcat安装目录\work\Catalina\localhost\你的web项目名\org\apache\jsp  

    大家遇到问题不要怕从源头去分析,解决问题的最好的办法就是去查看源代码!  

    </pre>  

      

    <h1>大家注意:</h1>  

      

    <h1>  

    (有个疑惑,如果是include(被包含)被包含的页面中有onload事件,那window.onload到底什么时候执行呢?  

    如果该页面被包含多次,那onload事件到底会执行几次?)  

    </h1>  

    <h2>用火狐浏览器调试跟踪一下include(被包含)被包含的页面,跟踪一下include(被包含)被包含的页面是怎么动态变化的,看  

    看window.onload事件到底什么时候执行呢?)  

    如果同一个页面include(被包含)多次,那该被包含的页面中的window.onload事件到底会被执行几次?  

    </h2>  

    <font color="red">  

    经过自己用火狐浏览器调试跟踪,测试得出结论,如果该页面include(被包含)多次,onload事件只会执行1次!而且是等整个网页全部都加载完毕  

    后再执行onload事件,(比如说,把a.jsp包含进index.jsp中,而且是把a.jsp包含进index.jsp中3次,如果a.jsp页面中有onload事件,那  

    么onload事件只会执行1次,不会执行3次,并且是在整个index.jsp页面都加载完后执行onload事件)。所以在a.jsp这个被包含的页面中写  

    了onload事件,而你的onload事件中的代码写的是document.getElementById("元素id");那么,等整个index.jsp页  

    面都加载完后执行onload事件时,就只能获取到第一个a.jsp(被包含进来的页面)页面上的元素,后面的第2次和第3次被包含进来的a.jsp页面上的元素是获  

    取不到的,因为document.getElementById("元素id");这句话,只能获取到一个元素,a.jsp页面被包含进index.jsp页面中3次,  

    也就是说index.jsp页面中有3个id一样的元素,那么document.getElementById("元素id");这句话只能获取到一个元素,也就是最前面的那  

    个元素(即第一个元素),所以也就导致了获取不到后面那2个元素。如果a.jsp页面被包含多次,你想获取到a.jsp(被包含页面)页面上的某个元素,最好是使  

    用document.getElementsByName("元素name");这样不管a.jsp页面被包含几次,都可以毫无遗漏的获取到你要找的元素,具体可以参  

    考我写的toDesktop.jsp这个页面(顺便提醒下,Html中,元素的id不要一样,因为id一般都是唯一的,id设置成一样,在Html语法上不会报错,但是很不规范,  

    所以id不要设置成重复的,name属性可以有重复的!)  

    </font>  

    <h2>注意:</h2>  

    include指令不支持EL表达式- @include file="$ {pageContext.request.contextPath}/hyperLinkList.jsp"这  

    种写法不支持,会报错HTTP Status 500 - /testInclude.jsp (line: 50, column: 2)   

    File "$ {pageContext.request.contextPath}/hyperLinkList.jsp" not found  

    <br>  

    include动作使用EL表达式容易出错,- jsp:include page="$ {pageContext.request.contextPath}/hyperLinkList.jsp"这  

    种写法会报错HTTP Status 500 - javax.servlet.ServletException:   

    File <font color="red">&quot;/xml/hyperLinkList.jsp&quot;</font> not found  

    <br>  

    include动作(jsp:include)是支持EL表达式的写法的,但  

    是像jsp:include page="$ {pageContext.request.contextPath}/SaveData2"这种写Servlet路径的写法解析后会多  

    出一个项目名路径出来,java.io.FileNotFoundException:   

    The requested resource (/xml/xml/SaveData2) is not available 最终导致找不到文件  

    <h2>  

    include动作(jsp:include)的page属性支持jsp,html和Servlet路径写法<br>  

    而include指令(@include)的file属性只支持jsp,html这种页面,不支持Servlet路径,也不支持EL表达式的写法<br>  

<font color="red">include(包含)中使用EL表达式,大家一定要多加注意和小心</font><br>  

    </h2>                                         

    <jsp:include page="/hyperLinkList.jsp"></jsp:include>  

    <%@include file="/hyperLinkList.jsp" %>  

    <jsp:include page="/SaveData2"></jsp:include>  

      

</body>  

</html>  

hyperLinkList.jsp页面

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"  

    pageEncoding="utf-8"%>  

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core"%>  

<!--  

<title>我是被包含的页面hyperLinkList.jsp</title> 

 -->  

    <center>  

    <hr>  

    <h1>演示jsp:include动作和include指令</h1>${param.onLineName}<br><br>  

        <h2>我是显示超链接集合页面(我是hyperLinkList.jsp)</h2>  

        <c:if test="${'SaveData2' == requestScope.fromPath }">  

        <c:forEach var="hyperLinkItem" items="${requestScope.hyperLinkList}">  

        <a style="background-color: red;" href="${hyperLinkItem.url}" target="_blank">${hyperLinkItem.name}</a>  

              

        </c:forEach>  

        </c:if>  

        <c:if test="${'SaveData' eq requestScope.fromPath }">  

        <c:forEach var="hyperLinkItem" items="${requestScope.hyperLinkList}">  

        <a href="${hyperLinkItem.url}" target="_blank">${hyperLinkItem.name}</a>  

              

        </c:forEach>  

        </c:if>  

    </center>  

    <jsp:include page="/toDesktop.jsp?userName=jack&age=6">  

    <jsp:param name="hobby" value="football"/>  

    </jsp:include>  

<hr>  

名称为SaveData2的servlet

[java] view plain copy

package com.jiongmeng.servlet;  

  

import java.io.IOException;  

import java.util.ArrayList;  

import java.util.List;  

  

import javax.servlet.ServletException;  

import javax.servlet.annotation.WebServlet;  

import javax.servlet.http.HttpServlet;  

import javax.servlet.http.HttpServletRequest;  

import javax.servlet.http.HttpServletResponse;  

  

import com.jiongmeng.entity.HyperLink;  

  

/** 

 * 保存数据,然后转发到jsp页面 

 */  

@WebServlet("/SaveData2")  

public class SaveData2 extends HttpServlet {  

    private static final long serialVersionUID = 1L;  

  

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  

        response.setContentType("text/html;charset=utf-8");  

        request.setAttribute("fromPath", "SaveData2");  

        System.out.println("--------------SaveData2--------------");  

        System.out.println("SaveData2 / city=" + request.getParameter("city"));  

        System.out.println("SaveData2 / moeny=" + request.getParameter("moeny"));  

        System.out.println("SaveData2 / workYear=" + request.getParameter("workYear"));  

        // 超链接实体,集合  

        List<HyperLink> hyperLinkList = new ArrayList<HyperLink>();  

        HyperLink hyperLink1 = new HyperLink("626", "智联招聘", "https://www.zhaopin.com/", "找工作上智联招聘");  

        HyperLink hyperLink2 = new HyperLink("627", "前程无忧", "https://www.51job.com/", "找工作上前程无忧");  

        HyperLink hyperLink3 = new HyperLink("628", "拉勾网", "https://www.lagou.com/", "IT互联网垂直招聘");  

        HyperLink hyperLink4 = new HyperLink("629", "酷狗音乐", "https://www.kugou.com/", "就是歌多");  

        HyperLink hyperLink5 = new HyperLink("630", "大众点评", "https://www.dianping.com/", "点评中的佼佼者");  

        HyperLink hyperLink6 = new HyperLink("891", "12306", "https://www.12306.cn/mormhweb/", "官方购买火车票");  

        hyperLinkList.add(hyperLink1);  

        hyperLinkList.add(hyperLink2);  

        hyperLinkList.add(hyperLink3);  

        hyperLinkList.add(hyperLink4);  

        hyperLinkList.add(hyperLink5);  

        hyperLinkList.add(hyperLink6);  

        request.setAttribute("hyperLinkList", hyperLinkList);  

        //转发至jsp页面  

//      request.getRequestDispatcher("/hyperLinkList.jsp").forward(request, response);  

        request.getRequestDispatcher("/hyperLinkList.jsp").include(request, response);  

          

    }  

  

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  

        doGet(request, response);  

    }  

  

}  

toDesktop.jsp

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"  

    pageEncoding="utf-8"%>  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

<title>放到桌面,发送快捷方式到桌面</title>  

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">  

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">  

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">  

<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>  

</head>  

<body>  

    <center>  

    <h1>  

    我是toDesktop.jsp页面<br><br>  

    ${param.userName}<br><br>  

    ${param.age}<br><br>  

    ${param.hobby}<br><br>  

    </h1>  

        <h2>放到桌面,发送快捷方式到桌面(IE浏览器会显示放到桌面这个按钮,其他浏览器不会显示放到桌面这个按钮)</h2>  

        <input name="myToDesktopButton" style="display: block;" id="toDesktopButton" type="button" value="放到桌面" onclick="toDesktop(location.href, '雪豹软件工作室')">  

        <!--   

        block    此元素将显示为块级元素,此元素前后会带有换行符。  

        inline    默认。此元素会被显示为内联元素,元素前后没有换行符。   

        如果把上面的button按钮的style的display设置成inline,那么该button按钮就会和下面的button按钮会显示在同一行  

        如果把上面的button按钮的style的display设置成block,那么该button按钮就会和下面的button按钮不会显示在同一行  

         -->  

        <input type="button" value="我是个按钮,我这个按钮没有任何意义">  

    </center>  

</body>  

<script type="text/javascript">  

  

    //将快捷方式发送到桌面  

    function toDesktop(sUrl, sName) {  

        try {  

            var WshShell = new ActiveXObject("WScript.Shell");  

            var oUrlLink = WshShell.CreateShortcut(WshShell  

                    .SpecialFolders("Desktop")  

                    + "\\" + sName + ".url");  

            oUrlLink.TargetPath = sUrl;  

            oUrlLink.Save();  

            alert("成功创建桌面快捷方式!");  

        } catch (e) {  

            alert("当前IE安全级别不允许操作或您的浏览器不支持此功能!");  

        }  

    }  

      

    //判断是否是IE浏览器  

    function isIE() {  

        if (!!window.ActiveXObject || "ActiveXObject" in window) {  

//          alert("是IE浏览器");  

            return true;  

        } else {  

//          alert("不是IE浏览器");  

            return false;  

        }  

    }  

      

    //如果该页面include(被包含)被包含多次,那么要等整个大的页面加载完之后才会执行onload事件,而且只会执行一次onload事件  

    /*比如a.jsp页面被多次包含进home.jsp页面中,那么要等整个home.jsp页面加载完之后才会执行onload事件,而且只会执行一次onload事件*/  

    window.onload = function() {  

        alert("url=" + window.location.href);  

        var result = isIE();  

        if (!result) {  

            //不是IE浏览器  

              

            /*  

            如果该页面include(被包含)只被包含1次,就使用下面这种document.getElementById("元素的id")的方式获取元素,只  

            能获取到一个元素  

            */  

            //获得按钮元素  

            var toDesktopButtonNode = document.getElementById("toDesktopButton");  

            //隐藏按钮  

            toDesktopButtonNode.style.display = "none";  

              

            /*  

            如果该页面include(被包含)被包含多次,就使用下面这种document.getElementsByName("元素的name")的方  

            式获取元素,可以获取到多个元素,获取到的是一个数组  

            */  

            var toDesktopButtonNodes = document.getElementsByName("myToDesktopButton");  

            for (var index = 0; index < toDesktopButtonNodes.length; index++) {  

                var toDesktopButtonElement = toDesktopButtonNodes[index];  

                toDesktopButtonElement.style.display = "none";  

            }  

        }  

    }  

</script>  

</html>  

点击复制链接 与好友分享!回本站首页
上一篇:JSP textarea如何显示换行?
下一篇:JSP Servlet基础学习之JSP脚本中的9个内置对象
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站