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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue filters的使用详解
2018/06/11 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
浅谈Python中的闭包
2015/07/08 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python实现图像识别功能
2018/01/29 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
浅述python2与python3的简单区别
2018/09/19 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python中树与树的表示知识点总结
2019/09/14 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
经典c++面试题二
2015/08/14 面试题
关于打架的检讨书
2014/01/17 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
美术教师自我鉴定
2014/02/12 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
大学开学计划书
2014/04/30 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
情人节活动总结范文
2015/02/05 职场文书