在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()打开一个窗口,您可以使用此属性返回来自目标窗口源(父)窗口的详细信息。