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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 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获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python实现京东秒杀功能
2018/07/30 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python 字符串池化的前提
2020/07/03 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
分家协议书
2014/04/21 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android