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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
微信小程序实现弹出层效果
May 26 Javascript
javascrpt密码强度校验函数详解
Mar 18 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实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python3 求约数的实例
2019/12/05 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python实现logistic分类算法代码
2020/02/28 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
python urllib和urllib3知识点总结
2021/02/08 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
迎新晚会主持词
2014/03/24 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
素质教育学习心得体会
2016/01/19 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL