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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
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
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
让焦点自动跳转
2006/07/01 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
js实现左右轮播图
2020/01/09 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python面向对象编程基础实例分析
2020/01/17 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
模具设计与制造专业推荐信
2014/02/16 职场文书
体育教学随笔感言
2014/02/24 职场文书
夜不归宿检讨书
2014/02/25 职场文书
2014年老干部工作总结
2014/11/21 职场文书
团队拓展训练感想
2015/08/07 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
节约用水广告语60条
2019/11/14 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA