浅析客户端的页面传值
这两天被项目折磨有些崩溃，在"崩溃"之余还是有了不少的收获，静谧夜半，整理整理自己的所得所想。
在自己所写的程序模块中应用了一些的ajax的异步调用的技术，当实现了基本的功能需求时，甚是兴奋，接踵而至的问题也是越来越多。但都已不是不可解决的，而是一个一个的坎儿。关于页面间的传值的问题曾经对于我来说是一个不小的坎儿，还好我已经跨过去了。
说说需求吧：页面中有一个异步调用的查询，我放置在页面的onload事件中，同时对于查询出的多条记录都有删除的功能，这个也可以通过链接进行异步调用。最头疼的问题是：一个插入的功能，他需要在另外的一个页面中以select的标签显示，选中select标签，点击新页面中的按钮，触发关闭窗口事件，同时将选中的select的值传给上一个页面，也就是说第二个页面没有提交给后台，而是在客户端将页面的值传递"父页面".曾经想到的window的两个方法，却也忘记一部分的功能点，总也实现不了。在网络的支持下，我还是找到了解决的办法，同时让自己对window.showModalDialog再次做了深度的研究：
我的测试环境是IE 7
下面先说说window.showModalDialog的基本用法
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明：
sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号";"隔开。
1.dialogHeight :对话框高度，不小于100px，IE 4中dialogHeight 和 dialogWidth 默认的单位是em，而IE 5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的，在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。
参数传递：
1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
example
index.html
<script language="JavaScript" type="text/javascript">
function show(str)
{
//注释此处的obj 做不做new操作都不影响，子窗体传递可以是对象，但是这里能操作的只是字符串
//哪位高人如有对对象的操作方法请留言
var obj = new Object();
//子窗体的值付给父窗体的变量
obj=window.showModalDialog(str,obj,"dialogWidth=400px;dialogHeight=200px");
if (typeof(obj) == 'undefined'){
alert('你是直接关闭窗体的，未得到子窗体的值');
}
else{
alert('子窗体的值是：'+obj);
}
}
</script>
<div align="center"><a href="#" onclick="show('test.html')">打开子窗体</a></div>
test.html
<html><base target="_self"><body>
<script language="JavaScript" type="text/javascript">
function test()
{
//子窗体的返回值赋值
window.returnValue=window.document.form1.select.value;
window.close();
}
</script>
<div align="center">
<form action="#" method="post" name="form1" target="_self">
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<br />
<input type="button" name="submit" value="submit" onclick="test();"/>
</div></body></html>
注：这里我做过测试：showModalDialog函数中的第二个参数要和等号左边的值一致，否则值传递失败。
一、showModalDialog和showModelessDialog有什么不同？
showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)
二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。
三、怎样才刷新showModalDialog和showModelessDialog里的内容？
在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合<base target="_self">使用，不然你按下F5会弹出新窗口的。
四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
<input type="button" value="关闭" onclick="window.close()">
另外还有一种模式也可以在窗体间传递参数window.open()但这个功效在项目中不是非常的适合，所以没有采纳，但也贴出在网上查到的一些资源，可以做做对比，共享资源.
使用方法：
newopen=window.open (sURL [, vArguments] [,sFeatures])
参数说明：
sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments--可选参数，类型：变体。为子窗口句柄,弹出窗口的名字，非必须，可用空''代替。
sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号","隔开。
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="JavaScript">
function openwin() {
window.open ("filename.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行
}
</script>
</head>
<body onload="openwin()">
任意的页面内容...
</body>
</html>
如何实现在不使用window.showModalDialog 的情况下用 window.open方式 向父窗口返回值。
例如： 页面AAA.htm 用 window.open方式弹出页面 BBB.htm 。
在页面BBB.htm上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口AAA.htm。
AAA.htm得到返回的值后，给本页面上的文本框赋值。
BBB.htm页面中加入下面代码：
window.opener.document.getElementById("theTextAreaId").value = document.getElemnetById("theSelectId").value ;
window.opener 的用法
window.opener 返回的是创建当前窗口的那个父窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：
window.opener.document.getElementById("name").value = "输入的数据";
window.opener 的用法
在一般的用法中，只是用来解决关闭窗口时不提示弹出窗口， 而对它更深层的了解一般比较少。其 实 window.opener是指调用window.open方法的窗口。
在工作中主要是用来解决部分提交的。这种跨页操作对工作是非常有帮助的。
如果你在主窗口打开了一个页面，并且希望主窗口刷新就用这个，打开页面的window.opener就相当于
主窗口的window。
主窗口的刷新你可以用
window.opener.location.reload()；
你可以改成这样 window.opener.yourformname.submit()
就好了