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 相关文章推荐
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
微信扫描二维码登录网站代码示例
2013/12/30 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
深度解读vue-resize的具体用法
2020/07/08 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python socket编程实例详解
2015/05/27 Python
分析Python读取文件时的路径问题
2018/02/11 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
爱国主题班会教案
2015/08/14 职场文书
体育教师研修感悟
2015/11/18 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
python异步的ASGI与Fast Api实现
2021/07/16 Python