题目：实现以下功能
1. 点击按钮“打开新窗口”，打开新的子页面，要求新窗口的大小为400px X 200px
2. 输入地址信息，点击“确定”按钮，关闭该页面
3. 将子页面中输入的地址信息，回传到父页面的地址信息文本栏位中
解：
事先准备：弄出来设置cookie和获取cookie两个函数。
function setCookie(name, value,times) { var oDate = new Date(); document.cookie = name + '=' + value + ';experis=' + (oDate.getDate() + times); } function getCookie() { var str = document.cookie; var arr = str.split(';'); var json_str = '({'; for (var i = 0; i < arr.length; i++) { json_str +="'"+ arr[i].replace("=","':'")+"',"; } json_str=json_str.substr(0, json_str.length - 1); json_str += '})'; return eval(json_str);//将cookie信息以json方式返回 }
思路一：使用cookie，将地址信息存入cookie中，然后再重新打开父页面，让父页面渲染时加载cookie中的信息。
实现：父页面中事先写下获取cookie函数，判断是否有该cookie值，有就执行没有罢了，然后点击按钮 打开新窗口，open('子页面','name','width=400,height=200,left...top...');
点击确定按钮时执行设置cookie函数，window.open('父页面');然后window.close();
在open后打开的父页面顺利加载cookie
父页面代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('btn'); var otxt = document.getElementById('txt'); oBtn.onclick = function () { window.open('cookie.htm', 'new_window', 'width=400,height=200,left=600,top=200'); }; } </script> </head> <body> <div> <input type="button" value="点一下试试" id="btn" /> <input type="text" id="txt" style=" 200px; height:30px" /> </div> <script type="text/javascript"> var otxt = document.getElementById('txt'); if (document.cookie) { otxt.value =getCookie()['address'] ; } </script> </body> </html>
子页面代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('btn'); var otxt = document.getElementById('txts'); oBtn.onclick = function () { if (otxt.value.length > 0) { setCookie('address','aaaaa',7); window.open('HTMLpage.htm'); window.close(); } else alert('别闹'); }; }; </script> </head> <body> <div> <input type="text" id="txts" style=" 200px; height:30px;" name="address" /> <input type="button" id="btn" value="确定" /> </div> </body>
</html>
缺点：虽能满足该题目要求，但是需要重新打开父页面，不能让父页面无加载局部刷新。
思路二：子页面用GET方式提交数据到父页面，父页面截取url获取地址信息 （该方式比较简单，代码略过不表）
思路三：利用window对象的opener方法。该方法能够完全满足题目要求
父页面代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('btn'); var otxt = document.getElementById('txt'); oBtn.onclick = function () { window.open('cookie.htm', 'new_window', 'width=400,height=200,left=600,top=200'); }; } </script> </head> <body> <div> <input type="button" value="点一下试试" id="btn" /> <input type="text" id="txt" style=" 200px; height:30px" /> </div> </body> </html>
子页面代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('btn'); var otxt = document.getElementById('txts'); oBtn.onclick = function () { if (otxt.value.length > 0) { window.opener.document.getElementById('txt').value = otxt.value; window.close(); } else alert('别闹'); }; }; </script> </head> <body> <div> <input type="text" id="txts" style=" 200px; height:30px;" name="address" /> <input type="button" id="btn" value="确定" /> </div> </body> </html>