父視窗代碼：（命名隨意）
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="HTTP://www.w3.org/1999/xhtml">
<head>
<meta HTTP-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript">
var child;
function onClick () {
window.open('childwindow.html');
}
function setData (id, name) {
document.getElementById('id').value = id;
document.getElementById('name').value = name;
}
</script>
</head>
<body>
<p>id:<input type="text" id="id"/></p>
<p>name:<input type="text" id="name" /></p>
<p><input type="button" value="彈出" onclick="onClick();" /></p>
</body>
</html>
子視窗代碼：（childwindow.html）
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="HTTP://www.w3.org/1999/xhtml">
<head>
<meta HTTP-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<table border="1">
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();" ><th>id</th><th>name</th></tr>
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();" ><td>1</td><td>Tony</td></tr>
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();" ><td>2</td><td>Lily</td></tr>
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();" ><td>3</td><td>John</td></tr>
</table>
</body>
</html>
// 多瀏覽器下測試通過
父視窗代碼(parent.html)
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="HTTP://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<input type="text" name="data_key" id="data_key" />
<input type="text" name="data_value" id="data_value" />
<input type="button" id="open_child_window" value="list_datas"/>
<script type="text/javascript">
window.onload = function(){
//取得打開子視窗的按鈕
var openChildBtn = document.getElementById("open_child_window");
//打開新視窗函數
function openNewWindow(url){
window.open(url);
}
//調用打開新視窗函數，指定新視窗位址
function openChildWindow(){
openNewWindow("child.html");
}
//為按鈕綁定事件
if (document.all) {
openChildBtn.attachEvent("onclick",openChildWindow);//IE
}else{
openChildBtn.addEventListener("click",openChildWindow);//非IE
}
}
</script>
</body>
</html>
子視窗代碼(child.html)這個必須按這個命名，如果要改，需要把父視窗代碼裡面的child.html也同步改掉
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="HTTP://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
body{font-size:12px}
.data_list{background:#ddf}
.data_list td{background:white}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="3" border="0" class="data_list">
<tr>
<td id="data_key_1">data_key_1</td>
<td id="data_value_1">data_value_1</td>
<td><input type="button" id="data_submitor_1" value="submit"/></td>
</tr>
<tr>
<td id="data_key_2">data_key_2</td>
<td id="data_value_2">data_value_2</td>
<td><input type="button" id="data_submitor_2" value="submit"/></td>
</tr>
<tr>
<td id="data_key_3">data_key_3</td>
<td id="data_value_3">data_value_3</td>
<td><input type="button" id="data_submitor_3" value="submit"/></td>
</tr>
<tr>
<td id="data_key_4">data_key_4</td>
<td id="data_value_4">data_value_4</td>
<td><input type="button" id="data_submitor_4" value="submit"/></td>
</tr>
</table>
<script type="text/javascript">
//向父視窗發送資料
function SendDataToParent(key,value){
if (window.opener && window.opener.document.getElementById("data_key")&& window.opener.document.getElementById("data_value")) {
window.opener.document.getElementById("data_key").value = key;
window.opener.document.getElementById("data_value").value = value;
}
}
window.onload = function(){
//如果父視窗已經被關閉或者不存在，直接返回
if (!window.opener) return ;
//遍歷所有的資料
for(var i=1;i<5;++i){
//取得提交按鈕
var btn = document.getElementById("data_submitor_" + i.toString());
//如果按鈕有效
if (btn) {
//為按鈕綁定事件
if(document.all){//IE
//attachEvent回應函數中this指標是指向window而不是指向事件回應物件的，所以需要一個函數來實現物件傳遞
function GetEventHandle(tag) {
return function () {
var temp = tag.id.split("_");
var index = temp[temp.length-1];
SendDataToParent(document.getElementById("data_key_"+index).innerHTML,document.getElementById("data_value_ "+index).innerHTML);
}
}
btn.attachEvent("onclick",GetEventHandle(btn));
}else{//非IE
btn.addEventListener("click",function(){
var temp = this.id.split("_");
var index = temp[temp.length-1];
SendDataToParent(document.getElementById("data_key_"+index).innerHTML,document.getElementById("data_value_"+ index).innerHTML);
});
}
}
}
}
</script>
</body>
</html>
點擊觸發事件
父視窗ID為XX的物件賦值為name是YY的值
window.parent.document.getElementById('xx').value = document.getElementsByName('YY').value;
