JS的传递数据不刷新页面的应用
2013-03-20 18:00
405 查看
以下文章纯是转抄,只因其中有一些东西是要用的,又怕忘掉,所以….作者看到可不要生气哟!
————————————————————————-
结合我最近的学习经历.整理一下jsp和js的混合应用的一个方法.
1 用途.
很常见的情况,比如你发一个帖子,或者写一个email,文章正文什么的写的差不多了,突然想起来,还要发个附件或者发个照片.这个时候,就要用倒一个上传功能.
在大多数的web页上,这个应用是很常见的。我们叫这个页面a,在a上,往往有个链接,名字叫”附件”,好了,点它,弹出一个窗口b.其实大多数b也就是个这个
<input type=”file”>用他浏览到我们需要找的文件,然后再次回到这个b页,在浏览按钮旁边,应该有个”上传”或者”粘贴”的一个按钮,点一下,好了,这个我们硬盘上的文件,应该已经发到服务器上去了.一般来说,这个时候,会返回一个字符串,往往是这个文件在服务器的地址,或者名字什么的.
这个时候.就涉及到现在讨论的这个问题了.就是.
如何把这个在b上返回的字符串发送到一开始的a页上.而且不刷新a页面.—关键就在这个不刷新了.
如果用常规的post一个parameter到a上,会导致a的刷新.那我们写了半天的正文可能就消失了。使用者会骂人的.
如果为了保护这些已经写了的数据,在当初点”附件”的时候,就一起把那些写了一半的东西也从a这里post到b上.那么如果a中的表单数据众多,也是很消耗资源的.而且这个方法显的很笨.算是下策.
下面就说说,如何利用js混合jsp解决这个问题的方法.
2 解决
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
——————————–
在继续看下去前,我要在这里先说说为什么要用他,他有什么好处值得去用.
就我的理解.
首先 他可以在a页里边,利用js边传递一些参数到b,然后在b里边,还是用js,对这些参数进行操作后,还可以返回a,不需要刷新a页.这些返回的参数就可以显示出来.
也许有些奇怪.为什么不刷新也会显示出来?其实我的理解很简单.是这样的流程.在a.jsp里边,我们写下这个js.
<scrpit language=”javascript”>
…….
//首先定义一个需要传递的参数
var a=”111222″;
//定义一个接收返回用的变量
var obj=window.showModalDialog(“b.jsp”,a)
//注意,这个obj就是用来接收发出去经过操作又返回的数据用的。当初我window.showModalDialog(“b.jsp”,a)这样用,怎么都接收不到返回的数.
……………..
</script>
-这个时候,showModalDialog()函数就弹出一个网页对话框,这个框就是b.jsp,这个时候,js的操作,就转移到了b.jsp上.我把他理解问当前的操作焦点,从a.jsp转到了b.jsp.等一系列操作结束后,焦点再返回a.jsp.
在b里边我们的js开始操作了.
<scrpit language=”javascript”>
//我们在b里边定义一个变量,用途是接受发过来的数据.
var obj2=window.dialogArguments;
//-其实这个obj2 就是发过来这个a.我们可以对这个obj2进行操作,其实就是对发过来的参数a进行操作.如下.
alert(“obj2就是传过来的a! “+obj2); //可以看到alert出来就是 111222
obj2=”33333333″;
alert(“改变了!”+obj2) //这个时候,alert出来的就是33333333 了.
window.returnValue=obj2; //returnValue方法用来返回修改后的数据到a.jsp,就是返回这个obj2,在a中,obj会接受到这个数据.这个就是开始定义个var obj=window.showModalDialog(“b.jsp”,a) 后,obj的用途.是用来接收的.
这个时候,操作焦点再次回到a.jsp,在里边,js又开始再次往下走.假若我们a.jsp的表单名字叫myform.这个显示文件上传后的input框是<input type=”text” name=”mytext”>这样的话.
在js里边,我们可以继续控制,操作如下.
document.myform.mytext=obj;
这个时候,就会发现.在不刷新的情况下.mytext的值已经自己变了.变成3333333333;
这个就是我们要大致的操作和思路,在混合调用jsp的时候,方法是类似的.在看完下边列出我们所用的js的函数方法的介绍后,我们详细的讨论使用方法.
当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。
使用方法如下:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
传入参数:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
test1.htm
====================
<script>
var mxh1 = new Array(“mxh”,”net_lover”,”孟子E章”)
var mxh2 = window.open(“about:blank”,”window_mxh”)
// 向对话框传递数组
window.showModalDialog(“test2.htm”,mxh1)
// 向对话框传递window对象
window.showModalDialog(“test3.htm”,mxh2)
</script>
test2.htm
====================
<script>
var a = window.dialogArguments
alert(“您传递的参数为:” + a)
</script>
test3.htm
====================
<script>
var a = window.dialogArguments
alert(“您传递的参数为window对象,名称:” + a.name)
</script>
可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
test4.htm
===================
<script>
var a = window.showModalDialog(“test5.htm”)
for(i=0;i<a.length;i++) alert(a[i])
</script>
test5.htm
===================
<script>
function sendTo()
{
var a=new Array(“a”,”b”)
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value=”返回” type=button onclick=”sendTo()”>
</form>
常见问题:
1,如何在模态对话框中进行提交而不新开窗口?
如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子,
test6.htm
===================
<script>
window.showModalDialog(“test7.htm”)
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows=”0,*”>
<frame src=”about:blank”>
<frame src=”test8.htm”>
</frameset>
test8.htm
===================
<form target=”_self” method=”get”>
<input name=txt value=”test”>
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?
答案是不能。但在frame里是可以的。
3 具体的操作
以我在jsp中的文件和图片上传的方法为例。
在我的新闻添加页addnews.jsp,有个图片上传功能。点上传按钮。弹出uploadimg.jsp。在addnews.jsp有个
<input type=”text” name=”img”>用来输入图片的url,如果想自己上传图片,在上传结束后,会自动把value设置成上传好的图片在服务器的位置。方便以后整个表单的提交。
有js如下。
<script language=”JavaScript”>
var a=”"; //定义一个变量用来传递数据,修改后会传回来我们要的字符。
function sendloadl()
{
var s=window.showModalDialog(“temp.htm”,a);//传到temp.htm是由于不想在uploadimg提交后再弹出新页,用了 frameset ,前边例子有讲过。
myform.img.value=s; //我们要的返回值;
}
</script>
<input type=”button” onClick=”sendload()” value=”上传”> //上传按钮,调用了定义的sendland函数。
temp.htm 就是个框架
<frameset rows=”0,*”>
<frame src=”about:blank”>
<frame src=”uploadimg.jsp”>
</frameset>
提交的时候,uploadimg.jsp还是起一个浏览的作用,他将会把数据post到doload.jsp,数据将在doload.jsp调用写好的imgload.class,然后返回一个文件名,就是我们要的东西了.
这个frameset就是保证我们从uploadimg.jsp提交到doload.jsp的时候,不弹出新窗口.
uploadimg.jsp的表单如下.
<form method=”post” enctype=”multipart/form-data” action=”doload.jsp” target=”_self”>
<input name=”file” type=”file”>
<input type=”submit” name=”Submit” value=”upload”>
</form>
在doload.jsp中,我们经过了jsp的操作,获得了一个imgurl,这个string imgurl 就是我们要传回去的东西。(图片地址)
这个时候,我们还需要写一个按钮,点他,执行回传数据的js,并且关掉这个窗口.
<script language=”JavaScript”>
function sendTo()
{
var a = window.dialogArguments; //取得从addnews.jsp获得a
a=”<%=imgurl%>” //把a的的值改成我们要返回的字符串,就是上传好的图片地址.
// alert(“newpara:”+a);
window.returnValue =a //返回a
window.close()
}
<input value=”返回” type=”button” onClick=”sendTo()”> 这个按钮,保证了点后,将数据返回,并且关掉这个窗口.
数据在返回后,被var s 所接受,myform.img.value=s; 于是我们的这个form的输入框img的数值就变成了s,也就是我们返回的上传好的图片的地址.
其实在a.jsp和b.jsp里边,还可以这样操作的.
在b的js里边.
var obj2=windw.dialogArguments;
obj2.a=<%=imgurl%>;
//就是直接在b里边控制a里边的变量a ,原来我们定义的是个var a=""后来经过在b里边的js的重新设置.
但是奇怪的是,我仅仅是看到例子这样写,自己实验还是不成功,有点奇怪。似乎
obj2.a 这样的语法是不允许的.
-----------别人写的例子在这里.
四、从caller页面传递数据到callee页面 上面我们介绍了创建模态和非模态窗口的语法以及如何
控制新窗口的大小、位置和外观,接下来我们研究一下实际应用中更实用的功能:如何从caller页
面传递数据到callee页面。从caller页面传递给callee页面的数据分为3类:传递值、传递数组引用
以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。
(一)传递值类型数据 在caller.htm页面中输入以下代码:
<INPUT TYPE=”button” VALUE=”创建模态对话框” onclick=”fnOpenModal()”>
<br><br>
<INPUT TYPE=”button” VALUE=”创建非模态对话框” onclick=”fnOpenModeless()”>
<script language=”javascript”>
<!– function fnOpenModal()
{ window.showModalDialog(“callee.htm”,”打开了一个新模态窗口”) }
function fnOpenModeless()
{ window.showModelessDialog(“callee.htm”,”打开了一个新非模态窗口”) }
// –> </script>
在callee.htm页面中输入以下代码:
<SCRIPT LANGUAGE=”JavaScript”>
<!– alert(dialogArguments); // –>
</SCRIPT>
在浏览器中打开caller.htm,点击任意一个按钮,我们将首先看到如下的提示信息框:
然后才出现新窗口。
这种情况下,callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中
的”打开了一个新模态窗口”或者”打开了一个新非模态窗口”。如果直接打开callee.htm,
将会出现错误提示。
(二)传递数组引用类型数据
第一种值类型数据的传递中,在callee.htm页面中只能读取caller.htm页面的传递数据。
当需要对caller.htm页面的传递内容进行修改时,就需使用到数组引用类型的传递方式。
首先,在caller.htm页面中输入以下代码:
<INPUT TYPE=”button” VALUE=”创建模态对话框” onclick=”fnOpenModal()”>
<br><br> <INPUT TYPE=”button” VALUE=”创建非模态对话框” onclick=”fnOpenModeless()”>
<script language=”javascript”>
<!– var a = new Array; a[0]=”first”;
a[1]=”second”;
a[2]=”third”;
function fnOpenModal()
{ window.showModalDialog(“callee.htm”,a) }
function fnOpenModeless()
{ window.showModelessDialog(“callee.htm”,a) }
// –> </script>
然后在callee.htm页面中输入以下代码:
<SCRIPT LANGUAGE=”JavaScript”>
<!– a = dialogArguments; alert(a); a[0] = “fourth”; // –>
</SCRIPT>
最后,在浏览器中打开caller.htm,点击任意一个按钮,我们将首先看到如下的对话框:
接着关闭这个对话框以及新打开的窗口,再次点击一个按钮,又出现一个对话框:
从运行结果我们看到,在caller.htm页面中通过对数组a的地址引用
就可以实现在callee.htm中修改数组a的内容。
注意在callee.htm中要首先建立对传递数据的附值:a = dialogArguments。
(三)传递对象类型数据
在caller.htm和callee.htm中传递数据的最有效方式是通过对象方式进行
,这不仅能实现从caller.htm到callee.htm的传递,还能从callee.htm传递到caller.htm。
而且,我们还可以在caller.htm中定义对象的方法,再在callee.htm中使用它们。实际上,
我们可以将caller.htm的window对象传递给callee.htm,这样就可以在callee.htm中访问
caller.htm的变量及函数。 来看看一个实际的例子。在caller.htm中输入以下代码:
<HTML> <HEAD> <TITLE>传递对象数据</TITLE>
<SCRIPT> var sColor=”";
function callDialog()
{ showModelessDialog(“callee.html”,window,”status:false;dialogWidth:300px;dialogHeight:150px”); }
function update() { oColor.innerText = sColor; }
</SCRIPT> </HEAD> <BODY> <P>输入你最喜欢的颜色:
<SPAN ID=”oColor” STYLE=”color:red;font-size:24″>
Yellow</SPAN></P>
<INPUT TYPE=”button” VALUE=”Display Modeless Dialog” onclick=”callDialog()”>
</BODY> </HTML>
在callee.htm中输入以下代码: <HTML> <HEAD>
<TITLE>callee.html</TITLE>
<SCRIPT>
function getInfoAndUpdate()
{ var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update(); }
function cancel()
{ var callerWindowObj = dialogArguments;
callerWindowObj.sColor = “Yellow”;
callerWindowObj.update(); }
</SCRIPT>
</HEAD>
<BODY> 输入你最喜欢的颜色:
<INPUT ID=oEnterColor><BR><BR>
<INPUT VALUE=”Apply” TYPE=button onclick=”getInfoAndUpdate();”>
<INPUT VALUE=”Ok” TYPE=button onclick=”getInfoAndUpdate();window.close();”>
<INPUT VALUE=”Cancel” TYPE=button onclick=”cancel();window.close();”>
</BODY> </HTML>
在浏览器中打开caller.htm,点击“显示非模态对话框”按钮,出现新对话框:
在对话框中输入其他颜色名称,点击“Apply”按钮后,
执行callee.htm中的getInfoAndUpdate函数:
function getInfoAndUpdate()
{ var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update(); }
因为在caller.htm中传递给callee.htm的是对象类型数据window,
所以经过第一条语句的附值,callerWindowObj就指向了caller.htm页面,
然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及函数
:callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传
递给caller.htm中的变量sColor,然后再执行caller.htm中的 update()函数更新显示信息。
可以看到,通过对象方式传递数据,功能很丰富强大,而且使用起来也不复杂。
六、结 语 以上对使用JavaScript语言操作模态和非模态对话框进行了详细介绍,
相信你又掌握了在html页面中创建窗口的一个新技术。在实际应用中,模态对话框的功能
比较实用,可用于必须让访问者阅读相关内容的情况下。另外,利用对象方式在窗口间传
递数据,功能非常强大但使用却不复杂,是非常值得一用的技术。
————————————————————————-
结合我最近的学习经历.整理一下jsp和js的混合应用的一个方法.
1 用途.
很常见的情况,比如你发一个帖子,或者写一个email,文章正文什么的写的差不多了,突然想起来,还要发个附件或者发个照片.这个时候,就要用倒一个上传功能.
在大多数的web页上,这个应用是很常见的。我们叫这个页面a,在a上,往往有个链接,名字叫”附件”,好了,点它,弹出一个窗口b.其实大多数b也就是个这个
<input type=”file”>用他浏览到我们需要找的文件,然后再次回到这个b页,在浏览按钮旁边,应该有个”上传”或者”粘贴”的一个按钮,点一下,好了,这个我们硬盘上的文件,应该已经发到服务器上去了.一般来说,这个时候,会返回一个字符串,往往是这个文件在服务器的地址,或者名字什么的.
这个时候.就涉及到现在讨论的这个问题了.就是.
如何把这个在b上返回的字符串发送到一开始的a页上.而且不刷新a页面.—关键就在这个不刷新了.
如果用常规的post一个parameter到a上,会导致a的刷新.那我们写了半天的正文可能就消失了。使用者会骂人的.
如果为了保护这些已经写了的数据,在当初点”附件”的时候,就一起把那些写了一半的东西也从a这里post到b上.那么如果a中的表单数据众多,也是很消耗资源的.而且这个方法显的很笨.算是下策.
下面就说说,如何利用js混合jsp解决这个问题的方法.
2 解决
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
——————————–
在继续看下去前,我要在这里先说说为什么要用他,他有什么好处值得去用.
就我的理解.
首先 他可以在a页里边,利用js边传递一些参数到b,然后在b里边,还是用js,对这些参数进行操作后,还可以返回a,不需要刷新a页.这些返回的参数就可以显示出来.
也许有些奇怪.为什么不刷新也会显示出来?其实我的理解很简单.是这样的流程.在a.jsp里边,我们写下这个js.
<scrpit language=”javascript”>
…….
//首先定义一个需要传递的参数
var a=”111222″;
//定义一个接收返回用的变量
var obj=window.showModalDialog(“b.jsp”,a)
//注意,这个obj就是用来接收发出去经过操作又返回的数据用的。当初我window.showModalDialog(“b.jsp”,a)这样用,怎么都接收不到返回的数.
……………..
</script>
-这个时候,showModalDialog()函数就弹出一个网页对话框,这个框就是b.jsp,这个时候,js的操作,就转移到了b.jsp上.我把他理解问当前的操作焦点,从a.jsp转到了b.jsp.等一系列操作结束后,焦点再返回a.jsp.
在b里边我们的js开始操作了.
<scrpit language=”javascript”>
//我们在b里边定义一个变量,用途是接受发过来的数据.
var obj2=window.dialogArguments;
//-其实这个obj2 就是发过来这个a.我们可以对这个obj2进行操作,其实就是对发过来的参数a进行操作.如下.
alert(“obj2就是传过来的a! “+obj2); //可以看到alert出来就是 111222
obj2=”33333333″;
alert(“改变了!”+obj2) //这个时候,alert出来的就是33333333 了.
window.returnValue=obj2; //returnValue方法用来返回修改后的数据到a.jsp,就是返回这个obj2,在a中,obj会接受到这个数据.这个就是开始定义个var obj=window.showModalDialog(“b.jsp”,a) 后,obj的用途.是用来接收的.
这个时候,操作焦点再次回到a.jsp,在里边,js又开始再次往下走.假若我们a.jsp的表单名字叫myform.这个显示文件上传后的input框是<input type=”text” name=”mytext”>这样的话.
在js里边,我们可以继续控制,操作如下.
document.myform.mytext=obj;
这个时候,就会发现.在不刷新的情况下.mytext的值已经自己变了.变成3333333333;
这个就是我们要大致的操作和思路,在混合调用jsp的时候,方法是类似的.在看完下边列出我们所用的js的函数方法的介绍后,我们详细的讨论使用方法.
当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。
使用方法如下:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
传入参数:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
test1.htm
====================
<script>
var mxh1 = new Array(“mxh”,”net_lover”,”孟子E章”)
var mxh2 = window.open(“about:blank”,”window_mxh”)
// 向对话框传递数组
window.showModalDialog(“test2.htm”,mxh1)
// 向对话框传递window对象
window.showModalDialog(“test3.htm”,mxh2)
</script>
test2.htm
====================
<script>
var a = window.dialogArguments
alert(“您传递的参数为:” + a)
</script>
test3.htm
====================
<script>
var a = window.dialogArguments
alert(“您传递的参数为window对象,名称:” + a.name)
</script>
可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
test4.htm
===================
<script>
var a = window.showModalDialog(“test5.htm”)
for(i=0;i<a.length;i++) alert(a[i])
</script>
test5.htm
===================
<script>
function sendTo()
{
var a=new Array(“a”,”b”)
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value=”返回” type=button onclick=”sendTo()”>
</form>
常见问题:
1,如何在模态对话框中进行提交而不新开窗口?
如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子,
test6.htm
===================
<script>
window.showModalDialog(“test7.htm”)
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows=”0,*”>
<frame src=”about:blank”>
<frame src=”test8.htm”>
</frameset>
test8.htm
===================
<form target=”_self” method=”get”>
<input name=txt value=”test”>
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?
答案是不能。但在frame里是可以的。
3 具体的操作
以我在jsp中的文件和图片上传的方法为例。
在我的新闻添加页addnews.jsp,有个图片上传功能。点上传按钮。弹出uploadimg.jsp。在addnews.jsp有个
<input type=”text” name=”img”>用来输入图片的url,如果想自己上传图片,在上传结束后,会自动把value设置成上传好的图片在服务器的位置。方便以后整个表单的提交。
有js如下。
<script language=”JavaScript”>
var a=”"; //定义一个变量用来传递数据,修改后会传回来我们要的字符。
function sendloadl()
{
var s=window.showModalDialog(“temp.htm”,a);//传到temp.htm是由于不想在uploadimg提交后再弹出新页,用了 frameset ,前边例子有讲过。
myform.img.value=s; //我们要的返回值;
}
</script>
<input type=”button” onClick=”sendload()” value=”上传”> //上传按钮,调用了定义的sendland函数。
temp.htm 就是个框架
<frameset rows=”0,*”>
<frame src=”about:blank”>
<frame src=”uploadimg.jsp”>
</frameset>
提交的时候,uploadimg.jsp还是起一个浏览的作用,他将会把数据post到doload.jsp,数据将在doload.jsp调用写好的imgload.class,然后返回一个文件名,就是我们要的东西了.
这个frameset就是保证我们从uploadimg.jsp提交到doload.jsp的时候,不弹出新窗口.
uploadimg.jsp的表单如下.
<form method=”post” enctype=”multipart/form-data” action=”doload.jsp” target=”_self”>
<input name=”file” type=”file”>
<input type=”submit” name=”Submit” value=”upload”>
</form>
在doload.jsp中,我们经过了jsp的操作,获得了一个imgurl,这个string imgurl 就是我们要传回去的东西。(图片地址)
这个时候,我们还需要写一个按钮,点他,执行回传数据的js,并且关掉这个窗口.
<script language=”JavaScript”>
function sendTo()
{
var a = window.dialogArguments; //取得从addnews.jsp获得a
a=”<%=imgurl%>” //把a的的值改成我们要返回的字符串,就是上传好的图片地址.
// alert(“newpara:”+a);
window.returnValue =a //返回a
window.close()
}
<input value=”返回” type=”button” onClick=”sendTo()”> 这个按钮,保证了点后,将数据返回,并且关掉这个窗口.
数据在返回后,被var s 所接受,myform.img.value=s; 于是我们的这个form的输入框img的数值就变成了s,也就是我们返回的上传好的图片的地址.
其实在a.jsp和b.jsp里边,还可以这样操作的.
在b的js里边.
var obj2=windw.dialogArguments;
obj2.a=<%=imgurl%>;
//就是直接在b里边控制a里边的变量a ,原来我们定义的是个var a=""后来经过在b里边的js的重新设置.
但是奇怪的是,我仅仅是看到例子这样写,自己实验还是不成功,有点奇怪。似乎
obj2.a 这样的语法是不允许的.
-----------别人写的例子在这里.
四、从caller页面传递数据到callee页面 上面我们介绍了创建模态和非模态窗口的语法以及如何
控制新窗口的大小、位置和外观,接下来我们研究一下实际应用中更实用的功能:如何从caller页
面传递数据到callee页面。从caller页面传递给callee页面的数据分为3类:传递值、传递数组引用
以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。
(一)传递值类型数据 在caller.htm页面中输入以下代码:
<INPUT TYPE=”button” VALUE=”创建模态对话框” onclick=”fnOpenModal()”>
<br><br>
<INPUT TYPE=”button” VALUE=”创建非模态对话框” onclick=”fnOpenModeless()”>
<script language=”javascript”>
<!– function fnOpenModal()
{ window.showModalDialog(“callee.htm”,”打开了一个新模态窗口”) }
function fnOpenModeless()
{ window.showModelessDialog(“callee.htm”,”打开了一个新非模态窗口”) }
// –> </script>
在callee.htm页面中输入以下代码:
<SCRIPT LANGUAGE=”JavaScript”>
<!– alert(dialogArguments); // –>
</SCRIPT>
在浏览器中打开caller.htm,点击任意一个按钮,我们将首先看到如下的提示信息框:
然后才出现新窗口。
这种情况下,callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中
的”打开了一个新模态窗口”或者”打开了一个新非模态窗口”。如果直接打开callee.htm,
将会出现错误提示。
(二)传递数组引用类型数据
第一种值类型数据的传递中,在callee.htm页面中只能读取caller.htm页面的传递数据。
当需要对caller.htm页面的传递内容进行修改时,就需使用到数组引用类型的传递方式。
首先,在caller.htm页面中输入以下代码:
<INPUT TYPE=”button” VALUE=”创建模态对话框” onclick=”fnOpenModal()”>
<br><br> <INPUT TYPE=”button” VALUE=”创建非模态对话框” onclick=”fnOpenModeless()”>
<script language=”javascript”>
<!– var a = new Array; a[0]=”first”;
a[1]=”second”;
a[2]=”third”;
function fnOpenModal()
{ window.showModalDialog(“callee.htm”,a) }
function fnOpenModeless()
{ window.showModelessDialog(“callee.htm”,a) }
// –> </script>
然后在callee.htm页面中输入以下代码:
<SCRIPT LANGUAGE=”JavaScript”>
<!– a = dialogArguments; alert(a); a[0] = “fourth”; // –>
</SCRIPT>
最后,在浏览器中打开caller.htm,点击任意一个按钮,我们将首先看到如下的对话框:
接着关闭这个对话框以及新打开的窗口,再次点击一个按钮,又出现一个对话框:
从运行结果我们看到,在caller.htm页面中通过对数组a的地址引用
就可以实现在callee.htm中修改数组a的内容。
注意在callee.htm中要首先建立对传递数据的附值:a = dialogArguments。
(三)传递对象类型数据
在caller.htm和callee.htm中传递数据的最有效方式是通过对象方式进行
,这不仅能实现从caller.htm到callee.htm的传递,还能从callee.htm传递到caller.htm。
而且,我们还可以在caller.htm中定义对象的方法,再在callee.htm中使用它们。实际上,
我们可以将caller.htm的window对象传递给callee.htm,这样就可以在callee.htm中访问
caller.htm的变量及函数。 来看看一个实际的例子。在caller.htm中输入以下代码:
<HTML> <HEAD> <TITLE>传递对象数据</TITLE>
<SCRIPT> var sColor=”";
function callDialog()
{ showModelessDialog(“callee.html”,window,”status:false;dialogWidth:300px;dialogHeight:150px”); }
function update() { oColor.innerText = sColor; }
</SCRIPT> </HEAD> <BODY> <P>输入你最喜欢的颜色:
<SPAN ID=”oColor” STYLE=”color:red;font-size:24″>
Yellow</SPAN></P>
<INPUT TYPE=”button” VALUE=”Display Modeless Dialog” onclick=”callDialog()”>
</BODY> </HTML>
在callee.htm中输入以下代码: <HTML> <HEAD>
<TITLE>callee.html</TITLE>
<SCRIPT>
function getInfoAndUpdate()
{ var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update(); }
function cancel()
{ var callerWindowObj = dialogArguments;
callerWindowObj.sColor = “Yellow”;
callerWindowObj.update(); }
</SCRIPT>
</HEAD>
<BODY> 输入你最喜欢的颜色:
<INPUT ID=oEnterColor><BR><BR>
<INPUT VALUE=”Apply” TYPE=button onclick=”getInfoAndUpdate();”>
<INPUT VALUE=”Ok” TYPE=button onclick=”getInfoAndUpdate();window.close();”>
<INPUT VALUE=”Cancel” TYPE=button onclick=”cancel();window.close();”>
</BODY> </HTML>
在浏览器中打开caller.htm,点击“显示非模态对话框”按钮,出现新对话框:
在对话框中输入其他颜色名称,点击“Apply”按钮后,
执行callee.htm中的getInfoAndUpdate函数:
function getInfoAndUpdate()
{ var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update(); }
因为在caller.htm中传递给callee.htm的是对象类型数据window,
所以经过第一条语句的附值,callerWindowObj就指向了caller.htm页面,
然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及函数
:callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传
递给caller.htm中的变量sColor,然后再执行caller.htm中的 update()函数更新显示信息。
可以看到,通过对象方式传递数据,功能很丰富强大,而且使用起来也不复杂。
六、结 语 以上对使用JavaScript语言操作模态和非模态对话框进行了详细介绍,
相信你又掌握了在html页面中创建窗口的一个新技术。在实际应用中,模态对话框的功能
比较实用,可用于必须让访问者阅读相关内容的情况下。另外,利用对象方式在窗口间传
递数据,功能非常强大但使用却不复杂,是非常值得一用的技术。
相关文章推荐
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 利用php和js实现页面数据刷新
- JS实现网页开窗刷新 GeT传递参数成功 远程打开页面失败的解决方法
- angularjs $state.go页面不刷新数据
- Android-应用开发-页面跳转和数据传递(六)
- JS控制静态页面之间传递参数获取参数并应用
- js随机刷新页面颜色(Math对象随机函数的应用)
- JS 页面之间传递json数据。
- 刷新页面将提示是否保存数据---JS
- 不刷新页面jQuery模糊搜索,第二种实现---js全局变量存储数据
- Android应用开发:页面跳转和数据传递
- JS页面间数据传递的各种方法和分析
- Niep.js - Web移动端无刷新页面切换 -- 页面数据加载
- JS控制静态页面之间传递参数获取参数并应用(window.location)
- JS中利用localStorage防止页面动态添加数据刷新后数据丢失
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js
- 关于“Asp.net 中后台CS读取数据库数据生成数组传递给前台页面JS使用”
- JS控制静态页面传递参数并获取参数应用
- 真正页面无刷新调用数据原理js无刷新
- Vuejs刷新页面子组件数据丢失问题的一点笔记