一道有趣的javascript编程题
题目：实现以下功能
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="点一下试试" />
<input type="text" />
</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" name="address" />
<input type="button" 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="点一下试试" />
<input type="text" />
</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" name="address" />
<input type="button" value="确定" />
</div>
</body>
</html>