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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
使用JS实现简易计算器
Jun 14 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求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
实例介绍Python中整型
2019/02/11 Python
python制作图片缩略图
2019/04/30 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python Cartopy的基础使用详解
2020/11/01 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
毕业自我评价
2014/02/05 职场文书
土地转让协议书范本
2014/04/15 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
综治工作汇报材料
2014/10/27 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
学校证明范文
2015/06/24 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python