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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
JS实现4位随机验证码
Oct 19 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
MySQL面试题
2014/01/12 面试题
初中家长寄语
2014/04/02 职场文书
青春寄语大全
2014/04/09 职场文书
十佳家长事迹材料
2014/08/26 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
个人股份合作协议书
2014/10/24 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
保洁员岗位职责
2015/02/04 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
创业计划书之水果店
2019/07/18 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers