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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
微信小程序上传图片实例
May 28 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
微信小程序渲染性能调优小结
Jul 30 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 使用post,get的一种简洁方式
2010/04/25 PHP
PHP制作万年历
2015/01/07 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
自动更新作用
2006/10/08 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
wxPython实现列表增删改查功能
2019/11/19 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python中线程和进程有何区别
2020/06/17 Python
python实现二分查找算法
2020/09/18 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
大学生写自荐信的技巧
2014/01/08 职场文书
土木工程专业推荐信
2014/02/19 职场文书
办公设备采购方案
2014/03/16 职场文书
男女朋友协议书
2014/04/23 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
MySQL分区以及建索引的方法总结
2022/04/13 MySQL