更好的方法将许多表单输入值从子窗口传递给父窗口 [英] Better way to pass many form input values from child to parent window
问题描述
我有一个有一堆单选按钮的子窗口。我想将所有这些许多值发送到opener窗口。
I have a child window which has a bunch of radio buttons. I would want to send all these many values to the opener window.
我通过将所有输入名称和值附加到javascript字符串来实现此目的。然后，我使用 window.opener 属性将字符串分配给父窗口中的隐藏字段。
I am achieving this by appending all the input names and values to a javascript string. I am then using window.opener property to assign string to hidden field in parent window.
document.getElementById("Errnodata").innerHTML = "" ;
var joinedArray = literal.join(", ");
window.opener.document.getElementById("myarray").value= joinedArray;
window.opener.getVolunteerDetails();
window.close();
所以这意味着 joinedArray NAME1，值1，NAME2值。有没有更好的方法将许多值传递给父窗口？或者任何惯用的/被接受的方式？
So this means joinedArray string has form like name1,value1,name2,value. And is there any better way to pass many values to the parent window? Or any idiomatic/accepted way?
谢谢。
推荐答案
您有很多选择。父窗口的窗口对象可以通过 window.opener 来使用（正如您找到的那样）。子窗口的窗口对象也可用于父对象，它是 window.open 的返回值。所以两人可以直接交谈。
You have lots of options. The parent window's window object is available to you (as you've found) via window.opener. The child window's window object is also availble to the parent, it's the return value of window.open. So the two can talk directly.
这意味着你可以...
This means you can...
-
...将值直接赋值给父项，或者（理想情况下）赋值给它为此目的的对象。
...assign values to the parent directly, or (ideally) to an object it makes available on that for the purpose.
在父项中：
window.results = {};
在孩子中：
opener.results.name = "value";
opener.results.anotherName = "another value";
...或让子窗口调用父级函数：
...or have the child window call a function on the parent:
opener.callback(/*...values here...*/);
...传递个别值或对象等。
...passing in individual values, or an object, etc.
...或者让父窗口伸出并与孩子的控件直接交互（但是这会产生很多紧密耦合，我不推荐它）：
...or have the parent window reach out and interact directly with the child's controls (but that creates a lot of tight coupling and I don't recommend it):
// Assuming you did `var child = window.open(/*....*/);`
var value = child.document.getElementById("someId").value;
以下是使用回调的示例：
Here's an example using a callback:
<!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>
这篇关于更好的方法将许多表单输入值从子窗口传递给父窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
