浅析客户端的页面传值

最新推荐文章于 2024-10-30 18:24:25 发布

d9g_bj

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量960

点赞数

文章标签： javascript function html 文档 ie button

本文链接：https://blog.csdn.net/d9g_bj/article/details/2821791

版权

这两天被项目折磨有些崩溃，在"崩溃"之余还是有了不少的收获，静谧夜半，整理整理自己的所得所想。

在自己所写的程序模块中应用了一些的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="#" οnclick="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" οnclick="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 οnkeydοwn="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="关闭" οnclick="window.close()">

另外还有一种模式也可以在窗体间传递参数window.open()但这个功效在项目中不是非常的适合，所以没有采纳，但也贴出在网上查到的一些资源，可以做做对比，共享资源.

使用方法：
newopen=window.open (sURL [, vArguments] [,sFeatures])

下面是一个完整的代码。

<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 οnlοad="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()
就好了