这篇文章主要介绍了JS中showModalDialog关闭子窗口刷新主窗口用法,结合具体实例形式较为详细的分析了showModalDialog常见用法与相关使用技巧,需要的朋友可以参考下
本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法。分享给大家供大家参考,具体如下:
网上找了好长时间 大都是window.opener.location.reload(),等等
都不是我想要的 最后终于发现了一个 想知道的就往下看看吧
showModalDialog和showModelessDialog
一、showModalDialog和showModelessDialog有什么不同?
showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。
showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而已。
二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?
在被打开的网页里加上<base target="_self">
就可以了。这句话一般是放在<head>之间的。
三、怎样才刷新showModalDialog和showModelessDialog里的内容?
在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码:
1 2 | <body onkeydown= "if (event.keyCode==116){reload.click()}" >
<a id= "reload" href= "filename.htm" rel= "external nofollow" style= "display:none" >reload...</a>
|
登录后复制
将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要配合<base target="_self">使用,不然你按下F5会弹出新窗口的。
四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
1 | <input type= "button" value= "关闭" onclick= "window.close()" >
|
登录后复制
也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。
五、showModalDialog和showModelessDialog数据传递技巧。
(作者语:本来想用一问一答形式来写的,但是我想不出这个怎么问,所以只好这样了。)
这个东西比较麻烦,我改了好几次了不是没办法说明白(语文水平越来越差了),只好用个例子说明了
例子:
现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name
一般的传递方式:
1 2 3 4 5 | window.showModalDialog( "filename.htm" ,var_name)
在showModalDialog(或showModelessDialog)读取和设置时:
alert(window.dialogArguments)
window.dialogArguments= "oyiboy"
|
登录后复制
这种方式是可以满足的,但是当你想在操作var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。
以下是我建议使用的传递方式:
1 2 | window.showModalDialog( "filename.htm" ,window)
|
登录后复制
在showModalDialog(或showModelessDialog)读取和设置时:
1 2 | alert(window.dialogArguments.var_name)
window.dialogArguments.var_name= "oyiboy"
|
登录后复制
同时我也可以操作var_id变量
1 2 | alert(window.dialogArguments.var_id)
window.dialogArguments.var_id= "001"
|
登录后复制
同样还可以对主窗口的任何对象进行操作,如form对象里的元素。
1 | window.dialogArguments.form1.index1.value= "这是在设置index1元素的值"
|
登录后复制
六、多个showModelessDialog的相互操作。
因为光说很费劲,我就偷点懒,直接用代码来说了。
以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。
主文件的部份js代码。
1 2 3 | var s1=showModelessDialog(''控制.htm'',window, "dialogTop:1px;dialogLeft:1px" )
var s2=showModelessDialog(''about:blank'',window, "dialogTop:200px;dialogLeft:300px" )
|
登录后复制
控制.htm的部份代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script>
function countNumber(A_strNumber,A_strWhatdo)
{
A_strNumber=A_strNumber.replace(''px'','''')
A_strNumber-=0
switch (A_strWhatdo)
{
case "-" :A_strNumber-=10; break ;
case "+" :A_strNumber+=10; break ;
}
return A_strNumber + "px"
}
</script>
<input type= "button" onclick="window.dialogArguments.s2.dialogTop=countNumber
(window.dialogArguments.s2.dialogTop,''-'') " value=" 上移">
<input type= "button" onclick="window.dialogArguments.s2.dialogLeft=countNumber
(window.dialogArguments.s2.dialogLeft,''-'') " value=" 左移">
<input type= "button" onclick="window.dialogArguments.s2.dialogLeft=countNumber
(window.dialogArguments.s2.dialogLeft,''+'') " value=" 右移">
<input type= "button" onclick="window.dialogArguments.s2.dialogTop=countNumber
(window.dialogArguments.s2.dialogTop,''+'') " value=" 下移">
|
登录后复制
以上关键部份是:
窗口命名方式:
1 | var s1=showModelessDialog(''控制.htm'',window, "dialogTop:1px;dialogLeft:1px" )
|
登录后复制
变量访问方式:
1 | window.dialogArguments.s2.dialogTop
|
登录后复制
这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能,通过这个原理,在showModelessDialog之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。
如果打开了一个模式窗口,想在打开的窗口中,关闭本窗口,重新加载父窗口,代码如下:
代码如下:
1 | Response.Write( "<script language=javascript>parent.window.opener=null;parent.window.dialogArguments.location.reload();window.close();</script>" );
|
登录后复制
或者
1 2 3 4 | function doModal(url){
win=window.showModalDialog(url,0, "dialogWidth:500px;dialogHeight:500px;status:no;help:no;" );
document.location.reload();
}
|
登录后复制
以上是具体介绍JS中showModalDialog关闭子窗口刷新主窗口的用法的详细内容。更多信息请关注PHP中文网其他相关文章!