Question

我想隐藏并从父窗口显示我的jsp页面的div标签，我也不想使用open window.open()如果我使用它而不是获取子窗口的引用然后我执行java脚本函数子窗口这个解决方案导致我的问题导致窗口首先加载比执行java脚本函数需要一些时间来隐藏div标签或者一段时间它显示每个div标签所以PLZ告诉我其他解决方案或操纵我的逻辑，以便我可以非常顺利地显示和隐藏父窗口中的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>&nbsp;</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>

Answer 1

目前，每次调用LoadById或LoadByName函数时，您的代码都会重新加载页面，因为它正在执行此操作：

var newWindow = window.open('../search/searchPage', 'mywindow', ...);

相反，让您的功能分享 newWindow变量，只有在window.open为newWindow时才调用null，如下所示：

var newWindow = null;

function LoadByName(windowHeight, windowWidth) {
    if (!newWindow) {
        var centerWidth = (window.screen.width - windowWidth) / 2;
        var centerHeight = (window.screen.height - windowHeight) / 2;
        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) {
    if (!newWindow) {
        var centerWidth = (window.screen.width - windowWidth) / 2;
        var centerHeight = (window.screen.height - windowHeight) / 2;
        newWindow = window.open('../search/searchPage', 'mywindow',
                'resizable=0,width=' + windowWidth + ',height=' + windowHeight;
    }
}

然后，您可以根据需要调用newWindow.showDiv和newWindow.hideDev，而无需每次都重新加载窗口内容。不幸的是，使用当前的代码（处理程序被旧式javascript:链接调用），newWindow最终成为全局变量（就像你的函数一样）。您可能会考虑以更现代的方式连接这些处理程序，或者至少将自己局限于一个全局变量（一个对象是其他属性）。

当然，如果你希望每次都重新加载窗口内容（刷新或更改搜索），那么为了确保只显示正确的div，请将查询字符串参数传递给jsp和让jsp输出具有适当可见性的div。或者您只能加载一次窗口，但使用ajax更新/更改搜索结果。

从父窗口使用子窗口的java脚本隐藏和显示div标签

1 个答案: