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查错流程归纳
May 04 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
vue 弹出遮罩层样式实例
Jul 22 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 实现explort() 功能的详解
2013/06/20 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
Laravel 队列使用的实现
2019/01/08 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python基于WordCloud制作词云图
2019/11/29 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python名片管理系统开发
2020/06/18 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
毕业生求职简历的自我评价
2013/10/07 职场文书
学校后勤人员职责
2013/12/27 职场文书
保密工作责任书
2014/04/16 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
病危通知单
2015/04/17 职场文书
读书笔记格式
2015/07/02 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技