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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
vue $router和$route的区别详解
Dec 02 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第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
浅谈Python中数据解析
2015/05/05 Python
python实现装饰器、描述符
2018/02/28 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
工作保证书范文
2014/04/29 职场文书
求职信怎么写范文
2014/05/26 职场文书
环卫工人节活动总结
2014/08/29 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
校友回访母校寄语
2015/02/26 职场文书
公司财务管理制度
2015/08/04 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Python提取PDF指定内容并生成新文件
2021/06/09 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技