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基本对象
Jan 11 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
JavaScript实现下拉列表
Jan 20 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/03/23 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python实现巡检系统(solaris)示例
2014/04/02 Python
让 python 命令行也可以自动补全
2014/11/30 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python datetime 如何处理时区信息
2020/09/02 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
单位接收函格式
2015/01/30 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
交通安全教育心得体会
2016/01/15 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
java代码实现空间切割
2022/01/18 Java/Android