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 import css实例代码
Jul 18 Javascript
javascript中length属性的探索
Jul 31 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
js抽奖转盘实现方法分析
May 16 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
jQuery冲突问题解决方法
Jan 19 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
php 数学运算验证码实现代码
2009/10/11 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php实现删除空目录的方法
2015/03/16 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP创建XML接口示例
2019/07/04 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
nodeJS微信分享
2017/12/20 NodeJs
JS原形与原型链深入详解
2020/05/09 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
新闻专业个人求职信
2013/12/19 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
读群众路线心得体会
2014/03/07 职场文书
大学生自我鉴定书
2014/03/24 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers