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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
深入分析javascript中console命令
Aug 14 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
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
jQuery 使用手册(一)
Sep 23 #Javascript
You might like
php+oracle 分页类
2006/10/09 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
Bootstrap实现翻页效果
2017/11/27 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python 实现微信自动回复的方法
2020/09/11 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
广告设计专业自荐信范文
2013/11/14 职场文书
顶岗实习接收函
2014/01/09 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
python三子棋游戏
2022/05/04 Python