一道有趣的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>
一道有趣的javascript编程题的更多相关文章
- 一道有趣的for循环题
一道有趣的for循环题 今天在复习js基础知识时发现了一个for循环的题,第一眼看到直接懵逼了,没想到for循环竟然还可以这样玩?涨姿势了. 题目是这样的 for(i=0, j=0; i<10, ...
- 汤姆大叔的6道javascript编程题题解
看汤姆大叔的博文,其中有篇(猛戳这里)的最后有6道编程题,于是我也试试,大家都可以先试试. 1.找出数字数组中最大的元素(使用Math.max函数) var a = [1, 2, 3, 6, 5, 4 ...
- JavaScript编程题（含腾讯2016校招题）
作者:ManfredHu 链接:http://www.manfredhu.com/2016/04/02/15-veryGoodForUsing/ 声明:版权所有,转载请保留本段信息,否则请不要转载 几 ...
- 自家人不认识自家人——考你一道有趣的Javascript小题目
今天的内容很简单,给大家分享一个有趣的Javascript小题目. 题目很简单,就是填空: var a = ______; var b = a; alert(a==b); // alert " ...
- 一道有趣的golang排错题
很久没写博客了,不得不说go语言爱好者周刊是个宝贝,本来想随便看看打发时间的,没想到一下子给了我久违的灵感. go语言爱好者周刊78期出了一道非常有意思的题目. 我们来看看题目.先给出如下的代码: p ...
- C#中一道关于多线程的编程题
题目的意思是这样的:让两个线程A和B将自己的ID轮番写入一个文件中,每个线程重复十次写入后执行一个回调函数,说“I'm OK”,就这样.我是一名QA,不是开发,出于兴趣报考了公司的C#课程考试,多线程 ...
- JavaScript编程题（一）
使用Javascript脚板输出如图所示的效果页面: 使用document.write()输出水平线 使用循环控制每个水平线的长度 答案:<!doctype html> <html ...
- 去哪儿网2017校招在线笔试（前端工程师）编程题及JavaScript代码
编程题很简单.整个试卷结构为: 一.问答题: 对前端的理解,了解哪些框架库? 二.在线编程题:身份证分组 如下第一道:身份证分组 三.在线编程题:身份证分组.统计字符.酒店价格(三选二) 如下第二三四 ...
- JavaScript数组基础编程题归纳
之前的随笔"JavaScript中数组类型的属性和方法"中有介绍很多数组类型的方法,但都是一些理论.最近在练习在线编程题,发现自己还是习惯于用常规的循环来答题,对于数组的方法的使用 ...
随机推荐
- 7.python字符串-内置方法分析
上篇对python中的字符串内置方法进行了列举和简单说明,但这些方法太多,逐一背下效率实在太低,下面我来对这些方法按照其功能进行总结: 1.字母大小写相关(中文无效) 1.1 S.upper() -& ...
- 010-python基础-数据类型-字符串操作
1.移除空白 username.strip() 2.分割 names = "alex,jack,rain" names_1 = names.split(",") ...
- Redis客户端之Spring整合Jedis
1.下载相关jar包,并引入工程: jedis-2.4.2.jar commons-pool2-2.0.jar 2.将以下XML配置引入spring <bean id="shard ...
- C 的 一些写法格式 交流
好久以前刚开始学习前辈们的代码的时候,发现好多代码感到好奇怪. 1)代码看不懂 2)代码格式看不懂 网上也没见同学们分享.当自己代码写多了,也渐渐的理解为什么要这样写了. 说主题之前 还是 说一些 题 ...
- QPBOC扩展应用交易流程
1 Q扩展部分数据 增加3个DGI,分别为:A001,8020,9020 9103中增加DF60(9F38中),DF61 增加DF62,DF63 1.1 A001扩展应用配置 DGI 长度 值(示例 ...
- DataReader 链接关闭解惑篇
不管是啥xxDataReader,都是继承DataReader实现的,所以是有共性的,因此标题就以DataReader为题了. 情况一:DataReader 默认链接不关闭 static void M ...
- 制作越狱版本的ipa文件
1.新建项目,证书选择开发者自己创建的证书 2.编译项目,在工程左侧树形菜单中,找到Product,找到编译后的项目,邮件,找到.app文件路径. 3.将这个app文件拖入到iTunes,邮件点击图标 ...
- vs2010 开发过程中调试时 有错误不中断
出现这个的原因是调试的设置有问题,修改下设置就好了. 修改方法:点击上边工具栏中 调试--异常 出现以下页面,把引发那列复选框全部勾上,点击确定就好了.
- easyui中jquery重复引用问题（tab内存泄露问题）
今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...
- UIStepper swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...