window.showModalDialog()用法
1.定义
window.showModalDialog()用来创建模态对话框
语法为:vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]);
参数:
(1)sURL :指定对话框要显示的文档的URL,字符串,必填
(2)vArguments:要向对话框传递的参数,变体(数组、变量等),选填
(3)sFeatures:生成对话框的外观信息,字符串,选填
参数 |
含义 |
说明 |
---|---|---|
dialogHeight |
对话框高度 |
不小于100px |
dialogWidth |
对话框宽度 |
|
dialogLeft |
离屏幕左的距离 |
|
dialogTop |
离屏幕上的距离 |
|
center |
是否居中 |
默认yes(yes:1,no:0) |
help |
是否显示帮助按钮 |
默认yes |
resizable |
是否可被改变大小 |
默认no |
status |
是否显示状态栏 |
Modal默认no,Modeless默认yes |
scroll |
是否显示滚动条 |
默认为yes |
注意:
window.showModalDialog()只能在IE浏览器中使用,如果是chrome或者火狐浏览器,可以使用window.open()方法,window.open()的具体用法参考https://www.cnblogs.com/wugongzi/p/13438578.html这篇博文。
区别:
window.showModalDialog()和window.open()都可以打开页面,两者之间有什么区别?
用window.showModalDialog()打开窗口,只有等打开的窗口关闭后,才会执行后面的js代码(同步);而window.open()打开窗口的同时就会继续往下执行代码(异步),所以如果你想等获取到子页面的值以后在去执行方法,建议使用showModalDialog()方法
2.用法
现在我们一起来看一下showModalDialog具体该如何使用
我们新建两个页面,放在同一个文件夹下面,名称分别为parent.html和child.html,分别代表父页面和子页面。在父页面中打开子页面窗口,并传递参数。子页面收到父页面传递过来的参数后进行输出,同时当子页面关闭时将返回值传递给父页面。父页面获取到返回值后进行输出。
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父页面——showModalDialog用法</title>
</head>
<body>
<div>
<button onclick="showDialog()">打开新窗口</button>
</div>
<script>
function showDialog() {
var message = "我是父页面的数据123";
var obj = window.showModalDialog("child.html", message, 'dialogWidth:300px;dialogHeight:380px;');
alert("返回的数据"+obj);
}
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="getMessage()">获取父页面传递过来的数据</button>
<script>
function getMessage() {
var message = window.dialogArguments;
alert(message);
window.returnValue="我是返回的数据abc";
}
</script>
</body>
</html>
- 切片的内部实现
- go interface
- 使用Spark MLlib给豆瓣用户推荐电影
- hadoop,hbase,hive,zookeeper版本整合兼容性最全,最详细说明【适用于任何版本】
- centos7:SSH公钥无密码认证
- Spark机器学习API之特征处理
- hadoop入门:第十章hadoop工具
- hive文件存储格式:SequenceFile系统总结
- openshift镜像构建-s2i环境变量设置
- Go Channel 源码剖析
- 再谈谈获取 goroutine id 的方法
- Golang方法和接口
- Go队列和堆栈
- openstack【juno】入门高级篇:为何你的实例ping不通外网【详述】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在虚拟目录中部署 ASP.NET Core 应用
- Docker 容器的健康检查
- 使用 mono 编译 .NET Standard 应用
- 指定 ASP.NET Core 应用监听的端口
- 发布 Angular 应用至生产环境
- 在 NHibernate 中使用 Snow Flake ID
- 在 Angular 应用中创建包含组件
- PostgreSQL 数据库中的窗口函数
- 代码整洁的 JavaScript
- Script 标记的 defer 和 async 属性说明
- 百行代码轻松爬取视频
- WebLogic coherence UniversalExtractor 反序列化 (CVE-2020-14645) 漏洞分析
- equals和hashCode你学会了么?
- 15 张精美动图全面讲解 CORS
- Rasa X 安装之Docker Compose 模式