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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
jquery操作select方法汇总
Feb 05 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
微信小程序页面传值实例分析
2017/04/19 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python数据处理实战(必看篇)
2017/06/11 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
Python是如何进行类型转换的
2013/06/09 面试题
大学生求职信
2014/06/17 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
校长个人总结
2015/03/03 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
frg-100简单操作(设置)说明
2022/04/05 无线电
Golang并发工具Singleflight
2022/05/06 Golang