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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
vue下的@change事件的实现
Oct 25 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
js实现复制粘贴的两种方法
Dec 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 sprintf()函数用例解析
2011/05/18 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
SinaEditor使用方法详解
2013/12/28 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
解读Python中degrees()方法的使用
2015/05/18 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python求凸包及多边形面积教程
2020/04/12 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
老乡会致辞
2015/07/28 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js