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常见开发技巧详细整理
Jan 02 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 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
php笔记之:文章中图片处理的使用
2013/04/26 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
通过python3实现投票功能代码实例
2019/09/26 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
python爬取天气数据的实例详解
2020/11/20 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
毕业生医学检验求职信
2013/10/16 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
森林病虫害防治方案
2014/06/02 职场文书
担保书格式
2015/01/20 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
MySQL数据库 安全管理
2022/05/06 MySQL