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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
Javascript实现秒表计时游戏
May 27 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
Python中itertools模块用法详解
2014/09/25 Python
详解Django中的form库的使用
2015/07/18 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
django ajax json的实例代码
2018/05/29 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
施工协议书范本
2014/04/22 职场文书
工作分析计划书
2014/04/30 职场文书
村创先争优活动总结
2014/08/28 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
酒店员工管理制度
2015/08/05 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android