js中的showModalDialog的实战应用
2013-06-13 00:44
309 查看
IE提供的showModalDialog()方法是一个很好用的Web应用功能，虽然一般的网站应用不是很常见，但一旦涉及到企业应用级的Web开发则就很有用了。现在我用一个简单易懂的例子来说明一下：
这一应用需要两个web文件：
1、父窗口（也即用来控制弹出窗口的那个页面）
showModalDialog.html
---------------------------------------------------------------------------------------
<html>
<head>
<title>showModalDialog</title>
<script language="JavaScript">
<!--
//aInfo作为数组对象，将被showModalDialog传递出去
//也可用var oMyobject=new Object();
//oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定义一个对象（firstProperty,lastProperty是自己按需定义的对象属性，可是任意取名并赋值）
var aInfo = new Array(3);
aInfo[0] = "aaaaaaaaaaa";
aInfo[1] = "bbbbbbbbbbb";
aInfo[2] = "ccccccccccc";
var url = "dialog.html";
var sFeatures ="dialogWidth=500px;dialogHeight=500px;dialogLeft=0;dialogTop=0;";
/*sFeatures的各项可选参数:
*dialogWidth:弹出窗口的宽度；
*dialogHeight:弹出窗口的高度；
*dialogLeft:弹出窗口的左边距
*dialogTop:
*edge:sunken | raised
*center: yes|no|1|0|on|off
*dialogHide: yes|no|1|0|on|off
*help: yes|no|1|0|on|off
*resizable: yes|no|1|0|on|off
*scroll: yes|no|1|0|on|off
*status: yes|no|1|0|on|off
*unadorned: yes|no|1|0|on|off
*/
functionshowDialog(){
//弹出一个showModalDialog,并以returnValue来获取返回值
var returnValue = window.showModalDialog(url,aInfo,sFeatures);
if(returnValue!=null){
//for(var i=0;i<returnValue.length;i++){
//document.all.info.innerHTML =returnValue[i]+"<br>";
//}
//输出返回值
document.all.info.innerHTML=returnValue;
}
//
}
//-->
</script>
</head>
<body>
<h3><a href="#" onclick="showDialog()">打开Dialog窗口</a></h3>
<div id="info"></div>
</body>
</html>
2、子窗口（即将被弹出的那个页面）
dialog.html
-----------------------------------------------------------------------------------------
<html>
<head>
<title>Dialog</title>
</head>
<body>
<script language="JavaScript">
<!--
//获取父窗口传来的对象（本例中就是父页面中的“oInfo”数组对象，也可用“window”对象，以便对父页面进行操作。总之，只要是object类型就成。）
var args = window.dialogArguments;
if(args!=null){
//document.write(args);
for(var i=0;i<args.length;i++){
document.writeln(args[i]+" "+(i+1)*10);
}
}else{
document.writeln("对不起，参数为空");
}
//向父窗口返回的值
window.returnValue = "这是子窗口返回来的值";
//-->
</script>
</body>
</html>
--------------------------------------------------------------------
好了，运行showModalDialog.html即可看出其中的端倪来了。。。
通过这些工作，我实现了将值在父页面和子页面中的相互传递和处理。我想这也正是ms设计showModalDialog()方法的初衷之所在吧。当然，这个例子太简单了。但我的目的只是通过它了解showModalDialog的执行机制。实际应用中需要举一反三才行呢。（完
这一应用需要两个web文件：
1、父窗口（也即用来控制弹出窗口的那个页面）
showModalDialog.html
---------------------------------------------------------------------------------------
<html>
<head>
<title>showModalDialog</title>
<script language="JavaScript">
<!--
//aInfo作为数组对象，将被showModalDialog传递出去
//也可用var oMyobject=new Object();
//oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定义一个对象（firstProperty,lastProperty是自己按需定义的对象属性，可是任意取名并赋值）
var aInfo = new Array(3);
aInfo[0] = "aaaaaaaaaaa";
aInfo[1] = "bbbbbbbbbbb";
aInfo[2] = "ccccccccccc";
var url = "dialog.html";
var sFeatures ="dialogWidth=500px;dialogHeight=500px;dialogLeft=0;dialogTop=0;";
/*sFeatures的各项可选参数:
*dialogWidth:弹出窗口的宽度；
*dialogHeight:弹出窗口的高度；
*dialogLeft:弹出窗口的左边距
*dialogTop:
*edge:sunken | raised
*center: yes|no|1|0|on|off
*dialogHide: yes|no|1|0|on|off
*help: yes|no|1|0|on|off
*resizable: yes|no|1|0|on|off
*scroll: yes|no|1|0|on|off
*status: yes|no|1|0|on|off
*unadorned: yes|no|1|0|on|off
*/
functionshowDialog(){
//弹出一个showModalDialog,并以returnValue来获取返回值
var returnValue = window.showModalDialog(url,aInfo,sFeatures);
if(returnValue!=null){
//for(var i=0;i<returnValue.length;i++){
//document.all.info.innerHTML =returnValue[i]+"<br>";
//}
//输出返回值
document.all.info.innerHTML=returnValue;
}
//
}
//-->
</script>
</head>
<body>
<h3><a href="#" onclick="showDialog()">打开Dialog窗口</a></h3>
<div id="info"></div>
</body>
</html>
2、子窗口（即将被弹出的那个页面）
dialog.html
-----------------------------------------------------------------------------------------
<html>
<head>
<title>Dialog</title>
</head>
<body>
<script language="JavaScript">
<!--
//获取父窗口传来的对象（本例中就是父页面中的“oInfo”数组对象，也可用“window”对象，以便对父页面进行操作。总之，只要是object类型就成。）
var args = window.dialogArguments;
if(args!=null){
//document.write(args);
for(var i=0;i<args.length;i++){
document.writeln(args[i]+" "+(i+1)*10);
}
}else{
document.writeln("对不起，参数为空");
}
//向父窗口返回的值
window.returnValue = "这是子窗口返回来的值";
//-->
</script>
</body>
</html>
--------------------------------------------------------------------
好了，运行showModalDialog.html即可看出其中的端倪来了。。。
通过这些工作，我实现了将值在父页面和子页面中的相互传递和处理。我想这也正是ms设计showModalDialog()方法的初衷之所在吧。当然，这个例子太简单了。但我的目的只是通过它了解showModalDialog的执行机制。实际应用中需要举一反三才行呢。（完
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 浅析js中的showModalDialog的实战应用
- 浅析js中的showModalDialog的实战应用
- js中的showModalDialog的实战应用
- vue2.0构建单页应用最佳实战案例 vue.js
- 图书推荐——疯狂Ajax讲义（第3版）——jQueryExt JSPrototypeDWR企业应用前端开发实战
- 浅析JavaScript中的showModalDialog的实战应用
- js实现队列互联网机顶盒实战应用
- Selenium2学习-036-WebUI自动化实战实例-034-JavaScript 在 Selenium 自动化中的应用实例之六（获取 JS 执行结果返回值）
- Vue.js基础篇实战--一个ToDoList小应用
- 《大数据可视化实战：d3.js深度应用》－02 开发环境配置
- 前台模块化RequireJS+anjularJS的实战应用（二）---- 实践应用
- JS实战应用 之 JS控制FileUpload控件上传的文件类型和清空控件选中的文件
- 浅析js中的showModalDialog的实战应用
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- ReactJS入门实战——基于ReactJS构架的图片画廊应用
- HTML+CSS+JS 开发 Firefox OS 应用编程实战
- js单页hash路由原理与应用实战
- html实战之二（图片选择器,js操作dom应用）
- js实现双向链表互联网机顶盒实战应用