我想从父窗口隐藏并显示我的jsp页面的div标签，window.open()如果我使用它而不是获取子窗口的引用然后我执行子窗口的java脚本函数，我不想使用open这个解决方案导致我问题原因窗口首先加载，然后执行 java 脚本函数需要一些时间来隐藏 div 标签或一些时间它会显示每个 div 标签，所以请告诉我其他解决方案或操纵我的逻辑，以便我可以显示和隐藏父窗口中的 div 标签非常顺利。我的要求不是打开一个新窗口，而是打开一个新选项卡，其中所有 div 标签都存在，根据主页按钮单击 div 标签显示
这是我的java脚本逻辑
function showDiv(id) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
// Check what the value of the button pressed and displays the correct div
if (id == 1)
div1.style.display = 'block';
if (id == 2) {
div2.style.display = 'block';
}
if (id == 3) {
div3.style.display = 'block';
}
}
这是子jsp
<script type="text/javascript">
function showDiv(id) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
// Check what the value of the button pressed and displays the correct div
if (id == 1)
div1.style.display = 'block';
if (id == 2) {
div2.style.display = 'block';
}
if (id == 3) {
div3.style.display = 'block';
}
}
function doAllThese(url) {
if (url == 'FindById') {
document.form.action = "/EmployeeWebSpring/search/FindById";
self.close();
}
if (url == 'FindByName') {
document.form.action = "/EmployeeWebSpring/search/FindByName";
}
if (url == 'FindByDeptNO') {
document.form.action = "/EmployeeWebSpring/search/FindByDeptNO";
}
}
</script>
</head>
<body>
<form:form name="form" commandName="employeeForm" method="post">
<div id="div1" style="display: block;">
Employee_ID:
<form:input path="employeeNumber" />
<input type="submit" name="method" value="FindById" id="FindById"
onclick="doAllThese(this.value)" />
</div>
<div id="div2" style="display: none;">
Employee_Name
<form:input path="firstName" />
<input type="submit" name="method" value="FindByName"
onclick="doAllThese(this.value)" /> <br />
<font size=3>For Searching the employees by<b>Employee
Name</b><br />you can use % match all the records with the given
pattern
</font><br /> <font size="2"> <i>e.g <b> for search by</b>EmployeeName<br />
matches alL the employees whose name starts with character <b>S</b></i></font>
</div>
<div id="div3" style="display: none;">
Employee_Name
<form:input path="departmentId" />
<input type="submit" name="method" value="FindByDeptNO"
onclick="doAllThese(this.value)" />
</div>
</form:form>
</body>
</html>
这是我的 home.jsp
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!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=ISO-8859-1">
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<title>Home</title>
<script type="text/javascript">
function LoadByName(windowHeight, windowWidth) {
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
var newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert("Name window");
newWindow.showDiv(2);
}
function LoadById(windowHeight, windowWidth) {
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
var newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert(newWindow);
newWindow.showDiv(1);
}
function LoadByDeptNo(windowHeight, windowWidth)
{
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
var newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert(newWindow);
newWindow.showDiv(3);
}
</script>
</head>
<jsp:include page="Header.jsp"/>
<p> </p>
<br>
<br>
<body>
</body>
</html>
这是 header.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<img src="../images/Header.png" width="1250" height="120" />
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>NewEntity</span></a>
<ul>
<li><a href='#'><span>Department</span></a></li>
<li><a href='#'><span>Employee</span></a></li>
<li><a href='#'><span>Project</span></a></li>
</ul></li>
<li class='has-sub '><a href='#'><span>FindEmployee</span></a>
<ul>
<li><a href="javascript:LoadById(250,500)"><span>FindEmployeeById</span></a></li>
<li><a href="javascript:LoadByName(250,500)"><span>FindEmployeeByName</span></a></li>
<li><a href=' javascript:LoadByDeptNo(250,250)'><span>FindByDepartmentId</span></a></li>
<li><a href="/EmployeeWebSpring/search/GetAllEmployee"><span>GetAllEmployee</span></a></li>
</ul></li>
<li class='has-sub '><a href='#'><span>FindDepartment</span></a>
<ul>
<li><a href="javascript:department()"><span>FindDepartmentById</span></a></li>
<li><a href="javascript:LoadByName(250,500)"><span>FindDepartmentByName</span></a></li>
<li><a href="../department/GetAllDepartment"><span>GetAllDepartment</span></a></li>
</ul></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>