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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
可拖拽组件slider.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安装为Apache DSO
2006/10/09 PHP
php变量范围介绍
2012/10/15 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python如何实现视频转代码视频
2019/06/17 Python
Python实现微信好友的数据分析
2019/12/16 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python对excel的基本操作方法
2021/02/18 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
简历中自我评价分享
2013/10/09 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
新文化运动的口号
2014/06/21 职场文书
机关作风建设心得体会
2014/10/22 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers