JS简单实现父子窗口传值功能示例【未使用iframe框架】


Posted in Javascript onSeptember 20, 2017

本文实例讲述了JS简单实现父子窗口传值功能。分享给大家供大家参考,具体如下:

父窗口页面father.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>父窗口 </TITLE>
<script language="javascript">
<!--
function openChild(){
var childwin = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
if(childwin != null)
document.getElementById("f11").value = childwin;
}
//-->
</script>
</HEAD>
<BODY>
<FONT face="宋体"></FONT>
<br>
传递到父窗口的值:<input id="f9" type="text" value="我是父窗口的值,呵呵" name="txt9"><br><br>
子窗口设置的值:<input id="f10" type="text" name="txt10"><br><br>
子窗口关闭后返回的值:<input id="f11" type="text" name="txt11"><br><br>
<input id="Button1" onclick="openChild()" type="button" value="openChild" name="Button1">
</BODY>
</HTML>

子窗口页面  child.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>弹出页面(子窗口)</TITLE>
</HEAD>
<BODY>
<FONT face="宋体"></FONT>
<br>
父窗口传递来的值:<input id="c0" type="text" name="txt0"><br><br><br>
输入要设置父窗口的值:<input id="c1" type="text" name="txt1"><input id="Button1" onclick="setFather()" type="button" value="不关闭本页面,设置父窗口的值" name="Button1"><br><br><br>
输入返回的值:<input id="c2" type="text" name="txt2"><input id="Button2" onclick="retrunValue()" type="button" value="关闭本页面,并返回值给父窗口" name="Button2">
<script language="javascript">
<!--
var fatherwin=window.dialogArguments;
//获得父窗口传递来的值
if(fatherwin!=null)
{
document.getElementById("c0").value = fatherwin.document.getElementById("f9").value;
}
//设置父窗口的值
function setFather()
{
fatherwin.document.getElementById("f10").value = document.getElementById("c1").value
}
//设置返回到父窗口的值
function retrunValue()
{
var s = document.getElementById("c2").value;
window.returnValue=s;
window.close();
}
//-->
</script>
</BODY>
</HTML>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue学习笔记之v-if和v-show的区别
Sep 20 #Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 #Javascript
PHP 实现一种多文件上传的方法
Sep 20 #Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 #Javascript
Vue.js项目模板搭建图文教程
Sep 20 #Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 #Javascript
You might like
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
集体婚礼策划方案
2014/02/22 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
校园文化标语
2014/06/18 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
党纪处分决定书
2015/06/24 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
python之django路由和视图案例教程
2021/07/26 Python
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS