Fatal编程技术网
  • javascript/
  • Javascript 从父窗口使用子窗口的java脚本隐藏和显示div标记

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

javascript

Javascript 从父窗口使用子窗口的java脚本隐藏和显示div标记,javascript,Javascript,我想从父窗口隐藏并显示jsp页面的div标记，而且我不想使用openwindow.open（）如果我使用该函数，而不是获取子窗口的引用，然后执行子窗口的java脚本函数，则此解决方案会导致我出现问题。原因窗口首先加载，然后再执行java脚本函数，需要一段时间隐藏div标记或显示每个div标记 所以请告诉我另一种解决方案，或者操纵我的逻辑，这样我就可以从父窗口非常顺利地显示和隐藏div标记。我的要求不是打开一个新窗口，而是打开一个新的选项卡，其中所有div标签都显示在主页按钮上，单击div标签就会

我想从父窗口隐藏并显示jsp页面的div标记，而且我不想使用open
window.open（）
如果我使用该函数，而不是获取子窗口的引用，然后执行子窗口的java脚本函数，则此解决方案会导致我出现问题。原因窗口首先加载，然后再执行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>


函数showDiv（id）{
var div1=document.getElementById（'div1'）；
var div2=document.getElementById（'div2'）；
var div3=document.getElementById（'div3'）；
//检查按下按钮的值并显示正确的div
如果（id==1）
div1.style.display='block'；
如果（id==2）{
div2.style.display='block'；
}
如果（id==3）{
div3.style.display='block'；
}
}
函数doAllThis（url）{
如果（url='FindById'）{
document.form.action=“/EmployeeWebSpring/search/FindById”；
self.close（）；
}
如果（url='FindByName'）{
document.form.action=“/EmployeeWebSpring/search/FindByName”；
}
如果（url='FindByDeptNO'）{
document.form.action=“/EmployeeWebSpring/search/FindByDeptNO”；
}
}
雇员身份证：
雇员姓名


用于按员工搜索员工
Name
您可以使用%match将所有记录与给定的
图案

例如按员工姓名搜索

匹配名称以字符S开头的所有员工
雇员姓名
这是我的家

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


家
函数LoadByName（窗口高度、窗口宽度）{
var centerWidth=（window.screen.width-windowWidth）/2；
var centerHeight=（window.screen.height-windowHeight）/2；
var newWindow=window.open（“../search/searchPage”，“mywindow”，
'可调整大小=0，宽度='+窗口宽度+'，高度='+窗口高度
+'左='+中心宽度+'，顶部='+中心高度）；
警报（“名称窗口”）；
newWindow.showDiv（2）；
}
函数LoadById（窗口高度、窗口宽度）{
var centerWidth=（window.screen.width-windowWidth）/2；
var centerHeight=（window.screen.height-windowHeight）/2；
var newWindow=window.open（“../search/searchPage”，“mywindow”，
'可调整大小=0，宽度='+窗口宽度+'，高度='+窗口高度
+'左='+中心宽度+'，顶部='+中心高度）；
警报（新窗口）；
newWindow.showDiv（1）；
}
函数LoadByDeptNo（窗口高度、窗口宽度）
{
var centerWidth=（window.screen.width-windowWidth）/2；
var centerHeight=（window.screen.height-windowHeight）/2；
var newWindow=window.open（“../search/searchPage”，“mywindow”，
'可调整大小=0，宽度='+窗口宽度+'，高度='+窗口高度
+'左='+中心宽度+'，顶部='+中心高度）；
警报（新窗口）；
newWindow.showDiv（3）；
}
这是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>



    

  • 

  • 

      

    • 

    • 

    • 

    • 

  • 

      

    • 

    • 

    • 

    • 

    • 

  • 

      

    • 

    • 

    • 

    • 

  • 

  •
当前，每次调用
LoadById
或
LoadByName
函数时，您的代码都会重新加载页面，因为这样做：

var newWindow = window.open('../search/searchPage', 'mywindow', ...);
相反，让函数共享
newWindow
变量，并且只调用
窗口。如果
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:
links调用），
newWindow
最终成为一个全局变量（与您的函数一样）。您可能会考虑以更现代的方式连接这些处理程序，或者至少将自己限制为一个全局变量（一个对象，其他东西都是它的属性）

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