(There is a doubt, if there is a window.onload event in the included page in the jsp page, when will the window.onload event be executed?) If the same page (included) is included multiple times, then When will the window.onload event in the included page be executed, and how many times will it be executed?
Attention everyone:
(There is a doubt, if there is an onload event in the included page, when will window.onload be executed? If the page is included multiple times, how many times will the onload event be executed?)
Use Firefox browser to debug and track the included page, track how the included page changes dynamically, and see when the window.onload event is executed?) If the same If a page is included (included) multiple times, how many times will the window.onload event in the included page be executed?
After debugging and tracing with the Firefox browser, the test concluded that if the page is included (included) multiple times, the onload event will only be executed once! And the onload event is executed after the entire web page has been loaded, (for example, Say, include a.jsp into index.jsp, and include a.jsp into index.jsp 3 times, if there is an onload event in a.jsp page, then the onload event will only be executed once, not executed 3 times, and the onload event is executed after the entire index.jsp page is loaded). So the onload event is written in the included page of a.jsp, and the code in your onload event is document.getElementById("element id"); Then, execute it after the entire index.jsp page is loaded When the onload event occurs, only the elements on the first a.jsp (included page) page can be obtained, and the elements on the second and third included a.jsp pages are not obtained. Yes, because of the sentence document.getElementById("element id");, only one element can be obtained, and the a.jsp page is included in the index.jsp page 3 times, that is to say, there are 3 times in the index.jsp page. elements with the same id, then document.getElementById("element id"); This sentence can only get one element, that is, the first element (ie the first element), so it can't be obtained. The last 2 elements. If the a.jsp page is included multiple times, and you want to get an element on the a.jsp (included page) page, it is best to use document.getElementsByName("element name"); If you include it several times, you can get the element you are looking for without omission. For details, please refer to the page I wrote toDesktop.jsp (by the way, in Html, the id of the element should not be the same, because the id is generally unique. , id is set to the same, no error will be reported in Html syntax, but it is very non-standard, so the id should not be set to be repeated, the name attribute can be repeated!
testInclude.jsp page
<%@ 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>Test include actions and directives</title>
</head>
<body>
<center>
After a simple test by myself, the path of the import page of the include action and instruction can be added with / slash or without / slash.
<br>
include action - both jsp:include page="/SaveData2" and jsp:include page="SaveData2" can be <br>
include指令-@include file="/hyperLinkList.jsp" 和 @include file="hyperLinkList.jsp"都可以<br>
</center>
<pre style="font-size: 16px;">
Everyone's attention: jsp:include page="/SaveData2" This line of code is placed in jsp:include page="/hyperLinkList.jsp" and
If @include file="/hyperLinkList.jsp" is in front of these two lines of code, then these three include will have data,
If, jsp:include page="/SaveData2" this line of code is placed in jsp:include page="/hyperLinkList.jsp" and
@include file="/hyperLinkList.jsp" After these 2 lines of code, then only jsp:include page="/SaveData2"
One type of include has data, and the other two types have no data
If you don't want jsp:include page="/SaveData2", only keep jsp:include page="/hyperLinkList.jsp" and
@include file="/hyperLinkList.jsp" If these two lines of code, then these two include will have no data, you can think about why?
As shown below, you can think that jsp will eventually be translated into Servlet. You can go and see the translated Servlet code. The translated Servlet code is in
tomcat installation directory\work\Catalina\localhost\your web project name\org\apache\jsp
Don't be afraid to analyze the problem from the source, the best way to solve the problem is to check the source code!
</pre>
<h1>Attention everyone:</h1>
<h1>
(There is a doubt, if there is an onload event in the included page, when will window.onload be executed?
If the page is included multiple times, how many times does the onload event execute?)
</h1>
<h2> Use the Firefox browser to debug and track the included pages, and track how the included pages change dynamically. See
See when the window.onload event is executed?)
If the same page is included (included) multiple times, how many times will the window.onload event in the included page be executed?
</h2>
<font color="red">
After debugging and tracing with Firefox browser, the test concluded that if the page is included (included) multiple times, the onload event will only be executed once! And it will wait for the entire page to be loaded.
Then execute the onload event, (for example, include a.jsp into index.jsp, and include a.jsp into index.jsp 3 times, if there is an onload event in the a.jsp page, then
Then the onload event will only be executed once, not 3 times, and the onload event will be executed after the entire index.jsp page is loaded). So write in the included page a.jsp
The onload event, and the code in your onload event is document.getElementById("element id"); Then, wait for the entire index.jsp page
When the onload event is executed after all the pages are loaded, you can only get the elements on the first a.jsp (included page) page, and the second and third a.jsp pages that are included in the following pages. The element above is obtained
Can't get it, because document.getElementById("element id"); This sentence, only one element can be obtained, the a.jsp page is included in the index.jsp page 3 times,
That is to say, there are 3 elements with the same id in the index.jsp page, then document.getElementById("element id"); This sentence can only get one element, which is the front one
elements (that is, the first element), so the latter two elements cannot be obtained. If the a.jsp page is included multiple times, and you want to get an element on the a.jsp (included page) page, it is best to use
Use document.getElementsByName("element name"); so that no matter how many times a.jsp page is included, you can get the element you are looking for without omission. For details, please refer to
Test the page toDesktop.jsp I wrote (by the way, in Html, the id of the element should not be the same, because the id is generally unique, and the id is set to the same, it will not report an error in Html syntax, but it is very irregular,
So don't set the id to be repeated, the name attribute can be repeated!)
</font>
<h2>Note:</h2>
The include directive does not support EL expressions - @include file="${pageContext.request.contextPath}/hyperLinkList.jsp" this
This way of writing is not supported, and an error will be reported HTTP Status 500 - /testInclude.jsp (line: 50, column: 2)
File "$ {pageContext.request.contextPath}/hyperLinkList.jsp" not found
<br>
The use of EL expressions for include actions is error prone, - jsp:include page="${pageContext.request.contextPath}/hyperLinkList.jsp" this
This way of writing will report an error HTTP Status 500 - javax.servlet.ServletException:
File <font color="red">"/xml/hyperLinkList.jsp"</font> not found
<br>
The include action (jsp:include) supports the writing of EL expressions, but
It is like jsp:include page="${pageContext.request.contextPath}/SaveData2", which will write more Servlet paths after parsing.
Out a project name path, java.io.FileNotFoundException:
The requested resource (/xml/xml/SaveData2) is not available which eventually resulted in the file not being found
<h2>
The page attribute of the include action (jsp:include) supports jsp, html and servlet path writing<br>
The file attribute of the include directive (@include) only supports pages such as jsp and html, but does not support the Servlet path, nor does it support the writing method of EL expressions<br>
<font color="red">include (include) uses EL expressions, everyone must pay more attention and be careful</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
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--
<title>I am the included page hyperLinkList.jsp</title>
-->
<center>
<hr>
<h1>Demo jsp:include action and include directive</h1>${param.onLineName}<br><br>
<h2>I am displaying the hyperlink collection page (I am 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>
servlet named SaveData2
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;
/**
* Save the data, then forward to the jsp page
*/
@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"));
// hyperlink entity, collection
List<HyperLink> hyperLinkList = new ArrayList<HyperLink>();
HyperLink hyperLink1 = new HyperLink("626", "Zhaopin Recruitment", "http://www.zhaopin.com/", "Looking for a job on Zhaopin Recruitment");
HyperLink hyperLink2 = new HyperLink("627", "Worry-free career", "http://www.51job.com/", "Looking for a job and worry-free career");
HyperLink hyperLink3 = new HyperLink("628", "Lagou", "https://www.lagou.com/", "IT Internet Vertical Recruitment");
HyperLink hyperLink4 = new HyperLink("629", "Kugou Music", "http://www.kugou.com/", "Just Geduo");
HyperLink hyperLink5 = new HyperLink("630", "Dianping", "http://www.dianping.com/", "The best in reviews");
HyperLink hyperLink6 = new HyperLink("891", "12306", "http://www.12306.cn/mormhweb/", "Official train ticket purchase");
hyperLinkList.add(hyperLink1);
hyperLinkList.add(hyperLink2);
hyperLinkList.add(hyperLink3);
hyperLinkList.add(hyperLink4);
hyperLinkList.add(hyperLink5);
hyperLinkList.add(hyperLink6);
request.setAttribute("hyperLinkList", hyperLinkList);
//forward to jsp page
// 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>Put it on the desktop, send a shortcut to the desktop</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>
I am toDesktop.jsp page<br><br>
${param.userName}<br><br>
${param.age}<br><br>
${param.hobby}<br><br>
</h1>
<h2>Put it on the desktop, send a shortcut to the desktop (IE browser will display the button to the desktop, other browsers will not display the button to the desktop)</h2>
<input name="myToDesktopButton" style="display: block;" id="toDesktopButton" type="button" value="put on desktop" onclick="toDesktop(location.href, 'Snow Leopard Software Studio')">
<!--
block This element will appear as a block-level element with line breaks before and after this element.
inline default. This element is displayed as an inline element, without line breaks before and after the element.
If the style display of the button button above is set to inline, then the button button will be displayed on the same line as the button button below.
If the style display of the button above is set to block, the button will not be displayed on the same line as the button below.
-->
<input type="button" value="I am a button, my button has no meaning">
</center>
</body>
<script type="text/javascript">
//Send the shortcut to the desktop
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("Successfully created desktop shortcut!");
} catch (e) {
alert("The current IE security level does not allow operation or your browser does not support this function!");
}
}
/ / Determine whether it is an IE browser
function isIE () {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
// alert("It's IE browser");
return true;
} else {
// alert("Not IE browser");
return false;
}
}
//If the page include (included) is included multiple times, the onload event will not be executed until the entire large page is loaded, and the onload event will only be executed once
/* For example, the a.jsp page is included in the home.jsp page multiple times, then the onload event will be executed after the entire home.jsp page is loaded, and the onload event will only be executed once*/
window.onload = function() {
alert("url=" + window.location.href);
var result = isIE ();
if (!result) {
//not IE browser
/*
If the page include (included) is included only once, use the following document.getElementById("element id") method to get the element, only
get an element
*/
//get button element
var toDesktopButtonNode = document.getElementById("toDesktopButton");
// hide button
toDesktopButtonNode.style.display = "none";
/*
If the page includes (included) is included multiple times, use the following method of document.getElementsByName("element name")
Get elements in the way, you can get multiple elements, and what you get is an array
*/
var toDesktopButtonNodes = document.getElementsByName("myToDesktopButton");
for (var index = 0; index < toDesktopButtonNodes.length; index++) {
var toDesktopButtonElement = toDesktopButtonNodes [index];
toDesktopButtonElement.style.display = "none";
}
}
}
</script>
</html>