题目：实现以下功能

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>

一道有趣的javascript编程题的更多相关文章

  1. 一道有趣的for循环题

    一道有趣的for循环题 今天在复习js基础知识时发现了一个for循环的题,第一眼看到直接懵逼了,没想到for循环竟然还可以这样玩?涨姿势了. 题目是这样的 for(i=0, j=0; i<10, ...

  2. 汤姆大叔的6道javascript编程题题解

    看汤姆大叔的博文,其中有篇(猛戳这里)的最后有6道编程题,于是我也试试,大家都可以先试试. 1.找出数字数组中最大的元素(使用Math.max函数) var a = [1, 2, 3, 6, 5, 4 ...

  3. JavaScript编程题（含腾讯2016校招题）

    作者:ManfredHu 链接:http://www.manfredhu.com/2016/04/02/15-veryGoodForUsing/ 声明:版权所有,转载请保留本段信息,否则请不要转载 几 ...

  4. 自家人不认识自家人——考你一道有趣的Javascript小题目

    今天的内容很简单,给大家分享一个有趣的Javascript小题目. 题目很简单,就是填空: var a = ______; var b = a; alert(a==b); // alert " ...

  5. 一道有趣的golang排错题

    很久没写博客了,不得不说go语言爱好者周刊是个宝贝,本来想随便看看打发时间的,没想到一下子给了我久违的灵感. go语言爱好者周刊78期出了一道非常有意思的题目. 我们来看看题目.先给出如下的代码: p ...

  6. C#中一道关于多线程的编程题

    题目的意思是这样的:让两个线程A和B将自己的ID轮番写入一个文件中,每个线程重复十次写入后执行一个回调函数,说“I'm OK”,就这样.我是一名QA,不是开发,出于兴趣报考了公司的C#课程考试,多线程 ...

  7. JavaScript编程题（一）

    使用Javascript脚板输出如图所示的效果页面: 使用document.write()输出水平线 使用循环控制每个水平线的长度 答案:<!doctype html> <html ...

  8. 去哪儿网2017校招在线笔试（前端工程师）编程题及JavaScript代码

    编程题很简单.整个试卷结构为: 一.问答题: 对前端的理解,了解哪些框架库? 二.在线编程题:身份证分组 如下第一道:身份证分组 三.在线编程题:身份证分组.统计字符.酒店价格(三选二) 如下第二三四 ...

  9. JavaScript数组基础编程题归纳

    之前的随笔"JavaScript中数组类型的属性和方法"中有介绍很多数组类型的方法,但都是一些理论.最近在练习在线编程题,发现自己还是习惯于用常规的循环来答题,对于数组的方法的使用 ...

随机推荐

  1. [css filter]filter在界面实现滤镜效果

    最近逛当当,发现当当尾品会的首页推荐最底端的商品链接是灰色的图片,然后鼠标hover之后就会变成正常的彩色 肯定不是通过img来改变的,然后直接看了一下源码,其实是用的filter属性 _(:з」∠) ...

  2. [转]ORACLE的ProC用法讲解

    pro*c是高级的用法,OCI是oracle的基础用法 如何编译.pc文件: proc code=cpp  parse=none iname=filename.pc oname=filename.cp ...

  3. AppCan应用开发之插件实践篇-支付插件

    电商O2O无疑是目前最受用户欢迎的APP类型,而在这类APP中必不可少的就是在线支付功能了.在AppCan平台开发这类应用时,官方封装了微信支付.支付宝.银联等多种支付SDK,更接入了多家聚合支付平台 ...

  4. H5 input type="search" 不显示搜索 解决方法

    在IOS(ipad iPhone等)系统的浏览器里打开H5页面.如下写法: <input type="search" name="search” id=" ...

  5. P1230: [Usaco2008 Nov]lites 开关灯

    嗯嗯,这是一道线段树的题,询问区间内亮着的灯的个数,我们可以把区间修改的线段树改一下,原本的求和改成若有奇数次更改则取反(总长度-亮着的灯个数),而判断是否奇数次只要数组加一个delta的值,upda ...

  6. PSP记录表

    学生     崔乐乐                 日期    2015/3/15 教师     王建民                 课程    软件工程 周活动总结表 任务 日期 听课 写程序 ...

  7. VIM技巧：翻页

    整页翻页 ctrl-f ctrl-bf=forword b=backward 翻半页ctrl-d ctlr-ud=down u=up 滚一行ctrl-e ctrl-y zz 让光标所在的行居屏幕中央z ...

  8. Java实现 Base64、MD5、MAC、HMAC加密

    开始对那些基本的加密还不怎么熟练,然后总结了些,写了一个测试:支持 Base64.MD5.MAC.HMAC加密,长话短说,我们都比较喜欢自己理解,看代码吧! 采用的输UTF-8的格式... packa ...

  9. SQL Server性能优化（5）表设计时的注意事项

    一. 是否需要冗余列 现在一些项目的数据库设计中,为了提高查询速度,把基本表的一些列也放到了数据表里,导致数据冗余.例如在热表的数据库里,原始数据表Measure_Heat里加了如房间号,单元号,楼号 ...

  10. Upgrading to Java 8——第四章 The Stream API

    在这章中我们将学习Stream API,在JDK 8 中的一项新的特性.为了理解这一章的主题,你需要知道如何使用Lambda表达式和java.util.function里的预定义的函数式接口. 一个S ...