js中模态窗口与非模态窗口初探(1)

js中模态窗口与非模态窗口初探(1)
　　编程也有一点时间了，一直都沉迷于B/S框架下，B/S框架就不得不接触js，接触的多了就会有一种意外——日久生情。真的很喜欢这个语言，尤其是在接触ajax之后。

　　在这仅有的一点点时间里，碰到了几次用模态窗口编程，每次都是上网查，网上的资料又太杂，虽说现在查找的范围有时候都仅限于园子，但是还是……所以，今天干脆花了一点时间把这些资料整理了一下。希望和大家一起分享一下，同时也希望大家看到我的不足和不对的地方帮我补充和纠正一下。

　　先说一下我今天碰到的问题。

　　我需要在一个页面A，用模态窗口打开一个新的页面B。在页面B中进行数据操作，操作完成关闭页面B，关闭页面B的同时要刷新页面A。

　　一开始我想到是这样去做

A.html
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function openNew(){
var arg = window.showModalDialog("B.html", 'a', "dialogWidth =315px;dialogHeight = 405px;help=0");
}
</script>
</head>
<body>
<input type="button" value="打开" onclick="openNew();">
</body>
</html>
B.html
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function closeCurrentPage()
{
window.opener.location.href=window.opener.location;
window.close();
}
</script>
</head>
<body>
<input type="button" value="关闭并刷新父窗体" name="btnClose" onclick="closeCurrentPage();">
</body>
</html>
　　我电脑上现在只有两个浏览器，IE8和FireFox3，备用电脑上有IE7。

　　我分别进行了测试，在IE8中报"window.opener.location为空或不是对象"这个错误，我以为是浏览器的问题(自从开始学ajax，我就养成了这样一个不好的习惯)。我用三个浏览器分别进行了测试，结果如下：

　　IE7和IE8都报上面那个错。

　　FireFox3可以达到我预期的目的。

　　这就很让我郁闷了，因为至少有一个好使，证明我的想法至少不错。

　　这里我要说一下window.showModalDialog(URL[, vArguments] [, sFeatures])这个方法的参数。这些参数网上到处可以当到。

　　参数说明：

　　URL

　　必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

　　Arguments

　　可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

　　sFeatures

　　可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
　　dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　 dialogWidth: 对话框宽度。
　 dialogLeft: 距离桌面左的距离。
　 dialogTop: 离桌面上的距离。
　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

　　这里我觉得Arguments这个参数是很重要的。因为这个参数的类型是不限定的，所以这里可以结合JSON进行数据传递。这B.html页面要去这个值，可以通过window.dialogArguments取值，如果子页面B.html要给父页面返回一个值。可以通过window.returnValue返回一个值。

　　下面是我做的一个实例。A.html用模态打开B.html的时候传一个person参数，B.html进行数据操作之后返回一个信息告诉A.html是否完成。代码如下：

A.html
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function test()
{
var person={"name":"hanyang","age":"23"};
var message=window.showModalDialog("B.html", person, "dialogWidth =315px;dialogHeight = 405px;help=0");
alert(message.state);
}
</script>
</head>
<body>
<input type="button" value="test" onclick="test();">
</body>
</html>
B.html
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function closeCurrentPage()
{
var message={"state":"error","info":"404"};
window.returnValue=message;
window.close();
}
</script>
</head>
<body>
<input type="button" value="关闭并刷新父窗体" name="btnClose" onclick="closeCurrentPage();">
</body>
</html>
其实上面这个代码已经完全实现我今天想要的效果，当然这只是停留在客户端方面。因为有ajax技术，大家可以用JQuery框架进行服务器端的异步调用。

　　我在这里想说一下，我在做这个过程中碰到的一些问题。

　　1、window.opener

　　window.opener得到当前窗口的父窗口，还可以说是打开当前窗口的窗口。这里有一点要说明，用window.open打开这个属性在IE8和FireFox3中都是没有问题的。但是用window.showModalDialog打开一个新窗口，在IE7和IE8中是不支持这个属性的。这个window.opener得到的相当于父窗口的window对象。

　　2、window.parent

　　window.parent是用<a href="">打开的页面支持这个属性。还有就是在iframe中也支持这个属性。

　　还有上面A.html页面中代码刷新页面用window.location.href=window.location.href;而不用window.location.reload();。我在网上搜了一下，没有搜到好的答案，只有一句话"刷新出现错误“新整理网页，必须重新传送资讯”说句实话我不是很明白这句话的意思。但我感觉这可能和Http协议有关系。window.location.reload()相当于按了F5，或者点了刷新按钮，而window.location.href=window.location.href则相当于重定向了一次页面。我想这两行代码在ASP.NET是可以验证的，用Page.IsPostBack属性。如果用window.location.reload()，Page.IsPostBack是true，而用window.location.href=window.location.href则Page.IsPostBack是false。在这里，用window.location.reload()是不刷新的。
相关阅读:
vmware 网络连接
 【剑指offer】设置在最小数目的阵列
 动画语音输入和文字输入开关
 Qt 如何处理拖放应用程序参数时，中国
 C#
dojo的TabContainer添加ContentPane假设closable，怎么不闭幕后予以销毁ContentPane
剑指XX(游戏10)
PHP的MySQL扩张：MySQL数据库概述
 所谓策略，我站在旁边看今天神刻的样子O2O
两个新事物
原文地址：https://www.cnblogs.com/hanyangecho/p/showModalDialog.html