Javascript 两个窗体之间传值实现代码


Posted in Javascript onSeptember 25, 2009

如我们新建窗体FatherPage.htm:
XML-Code:

<script type="text/javascript"> 
function OpenChildWindow() 
{ 
window.open('ChildPage.htm'); 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

然后在ChildPage.htm中即可通过window.opener来访问父窗体中的元素:
XML-Code:
<script type="text/javascript"> 
function SetValue() 
{ 
window.opener.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
window.close(); 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="SetFather" onclick="SetValue()" />

其实在打开子窗体的同时,我们也可以对子窗体的元素进行赋值,因为window.open函数同样会返回一个子窗体的引用,因此FatherPage.htm可以修改为:
XML-Code:
<script type="text/javascript"> 
function OpenChildWindow() 
{ 
var child = window.open('ChildPage.htm'); 
child.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

通过判断子窗体的引用是否为空,我们还可以控制使其只能打开一个子窗体:
XML-Code:
<script type="text/javascript"> 
var child 
function OpenChildWindow() 
{ 
if(!child) 
child = window.open('ChildPage.htm'); 
child.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

光这样还不够,当关闭子窗体时还必须对父窗体的child变量进行清空,否则打开子窗体后再关闭就无法再重新打开了:
XML-Code:
<body onunload="Unload()"> 
<script type="text/javascript"> 
function SetValue() 
{ 
window.opener.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
window.close(); 
} 
function Unload() 
{ 
window.opener.child=null; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="SetFather" onclick="SetValue()" /> 
</body>
Javascript 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
Underscore源码分析
Dec 30 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
vue实现列表的添加点击
Dec 29 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
jQuery 使用手册(七)
Sep 23 #Javascript
jQuery 使用手册(六)
Sep 23 #Javascript
jQuery 使用手册(五)
Sep 23 #Javascript
jQuery 使用手册(四)
Sep 23 #Javascript
jQuery 使用手册(三)
Sep 23 #Javascript
jQuery 使用手册(二)
Sep 23 #Javascript
jQuery 使用手册(一)
Sep 23 #Javascript
You might like
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
纯JS实现五子棋游戏
2020/05/28 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2014年科研工作总结
2014/12/03 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
详解Python flask的前后端交互
2022/03/31 Python