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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
js表单验证实例讲解
Mar 31 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Vue组件中slot的用法
Jan 30 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue实现table上下移动功能示例
Feb 21 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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 管理系统程序中的后门
2009/08/05 PHP
sae使用smarty模板的方法
2013/12/17 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
javascript multibox 全选
2009/03/22 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python异常处理操作实例详解
2018/05/10 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
物流仓储计划书
2014/01/10 职场文书
优秀教师演讲稿
2014/05/06 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
三下乡活动心得体会
2016/01/23 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书