(有个疑惑,如果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页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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">"/xml/hyperLinkList.jsp"</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页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://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
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", "智联招聘", "http://www.zhaopin.com/", "找工作上智联招聘"); HyperLink hyperLink2 = new HyperLink("627", "前程无忧", "http://www.51job.com/", "找工作上前程无忧"); HyperLink hyperLink3 = new HyperLink("628", "拉勾网", "https://www.lagou.com/", "IT互联网垂直招聘"); HyperLink hyperLink4 = new HyperLink("629", "酷狗音乐", "http://www.kugou.com/", "就是歌多"); HyperLink hyperLink5 = new HyperLink("630", "大众点评", "http://www.dianping.com/", "点评中的佼佼者"); HyperLink hyperLink6 = new HyperLink("891", "12306", "http://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
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>