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的history历史记录插件
Dec 11 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
如何利用React实现图片识别App
Feb 18 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Javascript操作cookie的函数代码
2012/10/03 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
vue实现计步器功能
2019/11/01 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
python实现计算器功能
2019/10/31 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python 高效编程技巧分享
2020/09/10 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
计算机网络毕业生自荐信
2013/10/01 职场文书
小学教师师德感言
2014/02/10 职场文书
环保建议书300字
2014/05/14 职场文书
群众路线剖析材料
2014/09/30 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书