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 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
JS控制输入框内字符串长度
May 21 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
深入理解js generator数据类型
Aug 16 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 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
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python实现数通设备端口监控示例
2014/04/02 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python利用命名空间解析XML文档
2020/08/10 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
创意广告词
2014/03/17 职场文书
司法所长先进事迹
2014/06/02 职场文书
法院授权委托书范文
2014/08/02 职场文书
卖房授权委托书样本
2014/10/05 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
政风行风评议工作总结
2014/10/21 职场文书
热血教师观后感
2015/06/10 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
八年级作文之友情
2019/11/25 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS