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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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冒泡排序算法代码详细解读
2011/07/17 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
详解Document.Cookie
2015/12/25 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
重构Python代码的六个实例
2020/11/25 Python
Python对excel的基本操作方法
2021/02/18 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
大学军训感言300字
2014/03/09 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS