欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如果jsp页面中include(被包含)被包含的页面中有加载事件,那window.onload事件到底什么时候执行,会执行几次?

程序员文章站 2022-04-15 19:16:52
(有个疑惑,如果页面中include(被包含)被包含的页面中有window.onload事件,那window.onload事件到底什么时候执行呢?)如果同一个页面(被包含)include多次,那该被...

(有个疑惑,如果页面中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>