JS子窗口向父窗口传值

世间本无路，恒走坦途出

已于 2022-10-19 11:06:53 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：转载好文章文章标签： js 子父页面传值

于 2018-04-04 17:41:39 首次发布

本文链接：https://blog.youkuaiyun.com/liangqibinde/article/details/79820483

转载好文章专栏收录该内容

12 篇文章

订阅专栏

方法一:用模式窗口

returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口(模式窗口就是子窗口，打开后不能操作父窗口,只能等模式窗口关闭时才能操作)时,用于返回窗口的值,下面举个例子:

//father.html
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
    function showmodal(){
        var ret = window.showModalDialog("child.html",null,"dialogWidth:350px;dialogHeight:350px;help:no;status:no");
        if (ret){
            alert('子窗口返回真!');
        }else{
            alert('子窗口返回假!');
        }
    }
</script>
</HEAD>
<BODY>
    <INPUT id=button1 type=button value=Button name=button1 onclick="showmodal();">
</BODY>
</HTML>

//child.html
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
    function trans(tag){
       if (tag==0){
            window.returnValue=false;
       } else{
           window.returnValue =true;
       }
       window.close();
    }
</script>
</HEAD>
<BODY>
    <INPUT id=button1 type=button value="返回真" name=button1 onclick="trans(1)">
    <INPUT id=button2 type=button value="返回假" name=button2 onclick="trans(0)">
</BODY>
</HTML>

这样一来可以实现从模式窗口向父窗口传递值的作用,这个returnValue除了可以是布尔值,整型值等以外还可以是个js数组，用来传递大量数据。

showModalDialog，是模态窗口，始终获得焦点，但弹出的窗体不能刷新，此弹出的窗口里操作button,要想不弹出新窗口，需在弹出的窗口中在<head>和</head>之间加

<base target="_self">

方法二:用opener

这是一个父窗口～

<html>
<head>
<title>
</title>
<script language="javascript">
    function win(){
       window.open("login.html",null,"height=150,width=200");
    }

</script>
</head>
<body>
    <table id="t1">
        <tr><td id="dd">user</td></tr>
        <tr><td id="bb">sex</td></tr>
    </table>
    <input type="button" value="提交" onclick="win()"/>
</body>
</html>

下面是一个子窗口

<html>
<head>
<title>
</title>
<script language="javascript">
    function win(){
       window.opener.document.all.dd.innerText=document.getElementByIdx("user").value;
       window.opener.document.all.bb.innerText=document.getElementByIdx("sex").value;
       window.close();
    }
</script>
</head>
<body>
    user:
    <input type="text" name="user"/>
    <br>sex:
    <input type="text" name="sex"/>
    <br>
    <input type="button" value="提交" onclick="win()"/>
</body>
</html>