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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
yii框架配置默认controller和action示例
2014/04/30 PHP
smarty简单入门实例
2014/11/28 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
浅析python中的分片与截断序列
2016/08/09 Python
Python实现京东抢秒杀功能
2021/01/25 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
《我不是最弱小的》教学反思
2014/02/23 职场文书
联谊活动总结
2014/08/28 职场文书
护理专业自我评价
2015/03/11 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
小学大队委竞选口号
2015/12/25 职场文书
如何写好开幕词?
2019/06/24 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
python b站视频下载的五种版本
2021/05/27 Python
python APScheduler执行定时任务介绍
2022/04/19 Python