一道有趣的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="点一下试试" id="btn" />
   <input type="text" id="txt" style=" width: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=" width: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=" width: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=" width:200px; height:30px;" name="address" />
  <input type="button" id="btn" value="确定" />
 </div>
</body>
</html>

posted @ 2013-12-10 11:02 白菜帮子阅读(460) 评论(0) 编辑收藏举报

刷新页面返回顶部

白菜帮子

一道有趣的javascript编程题

公告