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

18-05-11 来源：[db:作者]

收藏我要投稿

(有个疑惑，如果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" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

</head>

<body>

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

<br>

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

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

</center>

大家注意：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>

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

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

</h1>

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

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

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

</h2>

经过自己用火狐浏览器调试跟踪，测试得出结论，如果该页面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>

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页面

[html] view plain copy

<%@ 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>

-->

<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", "智联招聘", "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

[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" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

</head>

<body>

<h1>

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

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

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

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

</h1>

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

<!--

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

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

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

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

-->

</center>

</body>

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

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>

点击复制链接与好友分享!回本站首页