在father.html 表单页面中, 点击“选择”打开一个新的窗口son.html,
在新的窗口son.html中,点击相应“城市名称”的后,将“城市名称”赋值给father.html表单中。
父页面文件 father.html 代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div>
请选择城市:
<input id="city" name="city" type="text" value=""/>
<input id="btn" name="btn" type="button" value="选择" />
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btnObj = document.getElementById("btn");
btnObj.addEventListener('click',function(){
window.open("./son.html","_bank","left=500, top=100, width=400, height=300, resizable=no");
});
}
</script>
子页面 son.html 代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>北京</li>
<li>上海</li>
<li>成都</li>
<li>深圳</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var liObj = document.getElementsByTagName('li');
for(var i=0; i<liObj.length; i++){
liObj[i].onclick = function(){
var txtObj = this.firstChild.cloneNode();
//alert(txtObj.nodeValue);
window.opener.document.getElementById('city').value=txtObj.nodeValue;
window.close();
}
}
</script>
说明:
window的 opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。
当使用window.open()打开一个窗口,您可以使用此属性返回来自目标窗口源(父)窗口的详细信息。