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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
原生js实现碰撞检测
Mar 12 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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实现递归循环每一个目录
2010/08/08 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php统计文章排行示例
2014/03/04 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
详解Python3 基本数据类型
2019/04/19 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
中间件的定义
2016/08/09 面试题
建筑文秘专业个人求职信范文
2013/12/28 职场文书
相亲大会策划方案
2014/06/05 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang