Question

我有一个带有一堆单选按钮的子窗口。我想将所有这些值发送到开启窗口。

我通过将所有输入名称和值附加到javascript字符串来实现此目的。然后我使用window.opener属性将字符串分配给父窗口中的隐藏字段。

代码就像，

document.getElementById("Errnodata").innerHTML = "" ;  
var joinedArray = literal.join(", ");
window.opener.document.getElementById("myarray").value= joinedArray;
window.opener.getVolunteerDetails();
window.close();

因此，这意味着joinedArray字符串的格式类似于name1,value1,name2,value。有没有更好的方法将许多值传递给父窗口？或任何惯用/接受的方式？

感谢。

Answer 1

你有很多选择。您可以通过window使用父窗口的window.opener对象（如您所见）。子窗口的window对象也可用于父对象，它是window.open的返回值。所以两人可以直接对话。

这意味着你可以......

...直接将值分配给父级，或者（理想情况下）将值分配给它为此目的提供的对象。

在父母：
```
window.results = {};
```
在孩子身上：
```
opener.results.name = "value";
opener.results.anotherName = "another value";
```
...或让子窗口调用父项上的函数：
```
opener.callback(/*...values here...*/);
```
...传递单个值或对象等
...或者让父窗口伸出来并直接与孩子的控件交互（但是这会产生很多紧密耦合，我不推荐它）：
```
// Assuming you did `var child = window.open(/*....*/);`
var value = child.document.getElementById("someId").value;
```

以下是使用回调的示例：

家长：Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Child Callback - Parent Window</title>
</head>
<body>
  <input type="button" id="btnOpen" value="Open Child Win">
  <script>
    (function() {
      var child;

      document.getElementById("btnOpen").onclick = function() {
        if (!child) {
          child = window.open("http://jsbin.com/ukuvaj/1");
        }
      };

      window.callback = function(value) {
        display("Got callback from child, value = " + value);
      };

      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>

儿童：Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Child Window</title>
</head>
<body>
  <input type="text" id="textField" value="some value">
  <br><input type="button" id="btnSend" value="Send to Parent">
  <script>
    (function() {
      document.getElementById("btnSend").onclick = function() {
        opener.callback(document.getElementById("textField").value);
      };
    })();
  </script>
</body>
</html>

Answer 2

您不必传递字符串，您可以将任何内容传递给开启窗口。下面是一些可以使用的示例代码。父项打开子项，子项使用对象文字表示法在父项上设置一些变量。

父

    window.open('child.html');
    function showSettings() {
        // should say "hello"
        alert(myGlobalSettings.str);
    }

子

    window.opener.myGlobalSettings = {
        str: 'hello',
        array: ['a', 'b', 'c'],
        obj: {
            x: 123
        }
    };
    window.opener.showSettings();

Answer 3

如果您为孩子使用IFRAME

，这是一种干净的方法

让子表单向自己提交GET并让父级监听子帧的onload事件，并从新的location.href的查询字符串中解析数据。

parent.html

<textarea id="output_id"></textarea>
<iframe id="child_iframe_id" src="child.html"></iframe>
<script type="text/javascript">
    var iframe = document.getElementById("child_iframe_id");
    iframe.onload = function() {
        var href = iframe.contentWindow.location.href;
        var result = "";
        var data;
        if(href.indexOf("?") >= 0) {
            data = href.split("?")[1].split("&");
            for(var i=0; i<data.length; i++) {
                var pair = data[i].split("=");
                result += decodeURIComponent(pair[0]) + " : ";
                result += decodeURIComponent(pair[1]) + "\n";
            }
        }
        document.getElementById("output_id").value = result;
    }
</script>

child.html

<form id="child_id" method="get">
<input name="n1" />
<input name="n2" />
<select name="n3" >
<option value="v1">value</option>
</select>
<input type="submit" value="save to parent" />
</form>

从子窗口向父窗口传递多个表单输入值的更好方法

3 个答案:

父

子