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 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
小程序实现tab标签页
Nov 16 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中HTML标签过滤技巧
2014/01/07 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python使用folium excel绘制point
2019/01/03 Python
什么是servlet链?
2014/07/13 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
培训研修方案
2014/06/06 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
大学生年度个人总结
2015/02/15 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
MySQL 如何限制一张表的记录数
2021/09/14 MySQL