首页手记 js实现父页面弹出子页面，子页面传值给父页面

js实现父页面弹出子页面，子页面传值给父页面

标签：

JavaScript

1：弹窗式，通过使用window.showModalDialog()，（点击父页面上的链接弹出子窗口，在子窗口中点击确定传值到父页面）；
父页面parent.html，html代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language="JavaScript">
        function   show()   {  
            var   a=window.showModalDialog('child.html',"_blank",'dialogWidth:480px;dialogHeight:460px;center:yes;resizable:no;scroll:no'); 
            document.dForm.p.value=a;
          } 
    </script>
</head>

<body>
    <form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
        <input type="text" size="30" name="p" id="p" value=""/>
    </form>
    <a href="javascript:void(0);" onclick="show();">ShowModelDialog</a>
</body>
</html>

子窗口child.html，html代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <base target="_self">  
</head>

<body>
    <input type="button" onclick="JavaScript:window.returnValue='hahahhah';window.close();" value="sure">
    <input type="button" onclick="JavaScript:window.returnValue='';window.close();" value="cancel">
</body>
</html>

2：新页面式，通过使用window.open()，（点击父页面按钮跳转到新页面，也就是子页面，点击子页面的链接将值传递回父页面中）；
父页面parent.html，html代码：

<html> 
<head> 
    <title> parent </title> 
    <script language="JavaScript"> 
        function method(){ 
            window.open("child.html");                    
        } 
    </script > 
</head> 

<body> 
    <form method=podt action="" > 
        <input type="text" name="" id="text1"><br> 
    </form > 
    <input type="button" value="foward" onclick="method()"> 
</body> 
</html>

子页面child.html，html代码：

<html> 
<head> 
    <title>child</title> 
    <script language="JavaScript"> 
        function getValue(str){ 
            window.opener.document.getElementById("text1").value=str; 
            window.close(); 
        } 
    </script > 
</head> 

<body> 
    <a href="" onclick="getValue('11')">11</a> 
    <a href="" onclick="getValue('22')">22</a> 
    <a href="" onclick="getValue('33')">33</a> 
    <a href="" onclick="getValue('44')">44</a> 
</body> 
</html>

点击查看更多内容