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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
JS实现随机点名器
2020/04/12 Javascript
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python selenium 弹出框处理的实现
2019/02/26 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
keras多显卡训练方式
2020/06/10 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
品牌宣传方案
2014/03/21 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
毕业论文致谢词
2015/05/14 职场文书
学术会议领导致辞
2015/07/29 职场文书
感恩教育主题班会
2015/08/12 职场文书
导游词之昭君岛
2020/01/17 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Oracle中DBLink的详细介绍
2022/04/29 Oracle
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL