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 document.execCommand() 常用解析
Dec 14 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
Vue.js基础知识小结
Jan 13 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
Vue计算属性的使用
Aug 04 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 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经典的给图片加水印程序
2006/12/06 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
php中的静态变量的基本用法
2014/03/20 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
Javascript 解疑
2009/11/11 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python中二维阵列的变换实例
2014/10/09 Python
Python的gevent框架的入门教程
2015/04/29 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python实现快速排序的方法详解
2019/10/25 Python
详解Django admin高级用法
2019/11/06 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
保安自我鉴定范文
2013/12/08 职场文书
给老婆的保证书范文
2014/04/28 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android