js操作模态窗口及父子窗口间相互传值示例


Posted in Javascript onJune 09, 2014

parent.hmtl

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>父窗口</title> 
<script type="text/javascript"> window.onload=function(){ 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
var obj={ 
test:"张三传到子窗口", 
win:window 
}; 
var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes"); 
if(returnValue != null){ 
document.getElementById("content").innerHTML = returnValue; 
} 
}; 
} 
</script> 
</head> 
<body> 
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div> 
<input type="button" id="btn" value="弹出子窗口"> 
</body> 
</html>

child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>子窗口</title> 
<script type="text/javascript"> 
window.onload=function(){ 
//获取url的传参 
var args = window.dialogArguments; 
var win = args.win;//父窗口对象 
var content=document.getElementById("content"); 
content.value=args.test; 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
//模态对话框将值 
window.returnValue = content.value; 
window.close(); 
} 
} 
</script> 
</head> 
<body> 
<input type="text" id="content"><input type="button" id="btn" value="传值给父窗口"> 
</body> 
</html
Javascript 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 #Javascript
js利用prototype调用Array的slice方法示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 #Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 #Javascript
jQuery实现的Div窗口震动特效
Jun 09 #Javascript
js动态创建标签示例代码
Jun 09 #Javascript
jquery中 $.expr使用实例介绍
Jun 09 #Javascript
You might like
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python模块常用用法实例详解
2019/10/17 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
销售顾问工作计划书
2014/09/15 职场文书
读后感作文评语
2014/12/25 职场文书
现实表现证明材料
2015/06/19 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
创业计划书之冷饮店
2019/09/27 职场文书