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设置css属性的代码
Dec 28 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python中List的sort方法指南
2014/09/01 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python opencv肤色检测的实现示例
2020/12/21 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
Java基础知识面试要点
2016/07/29 面试题
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
自我评价中英文语句
2013/11/30 职场文书
简单租房协议书
2014/04/09 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js