1

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

我通过将所有输入名称和值附加到 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. 有没有更好的方法将许多值传递给父窗口？或者任何惯用/接受的方式？

谢谢。

4

3 回答 3

3

你有很多选择。父窗口的window对象可以通过window.opener. 子窗口的window对象也对父窗口可用，它是window.open. 所以两人可以直接对话。

这意味着您可以...

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

    在父级中：

    window.results = {};

    在孩子身上：

    opener.results.name = "value";
opener.results.anotherName = "another value";

  2. ...或者让子窗口调用父窗口的函数：

    opener.callback(/*...values here...*/);

    ...传递单个值或对象等。

  3. ...或者让父窗口伸出并直接与子控件交互（但这会产生很多紧密耦合，我不建议这样做）：

    // Assuming you did `var child = window.open(/*....*/);`
var value = child.document.getElementById("someId").value;

这是一个使用回调的示例：

父：Live Copy | 直播源

<!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>

孩子：活源

<!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>
于 2013-07-16T16:30:06.907 回答
1

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

家长

    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();
于 2013-07-16T16:38:54.223 回答
1

如果您为孩子使用 IFRAME，这是一种干净的方法

让子窗体向自身执行 GET 提交，并让父窗体监听子框架的 onload 事件并从新 location.href 的查询字符串中解析数据。

父.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>
于 2013-07-16T17:12:46.427 回答