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 判断checkbox是否选中的操作方法
Nov 09 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python抓取百度查询结果的方法
2015/07/08 Python
python模拟事件触发机制详解
2018/01/19 Python
Python之reload流程实例代码解析
2018/01/29 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python中四舍五入的正确打开方式
2021/01/18 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
计算机求职自荐信范文
2014/04/19 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python