本文主要讲解window.open()和window.showModalDialog()弹出窗口的一些基本用法和刷新问题
window.open()弹出对话框:
基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
eg:window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no,
menubar=no, scrollbars=no, resizable=no,location=no, status=no')//这句要写成一行
参数解释:
window.open 弹出新窗口的命令;
page.html 弹出窗口的文件名;
newwindow 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar=no 是否显示菜单栏,yes为显示;
scrollbars=no 是否显示滚动栏,yes为显示;
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
下面来说一下window.opener
window.opener 实际上就是通过window.open打开的窗体的父窗体。比如在父窗体parent里面通过window.open("sub.html")打开一个窗口,那么在sub.html中window.opener就代表parent,可以通过这种方式设置父窗体的值或者调用父窗体的js方法。
eg:1,window.opener.test(); ---调用父窗体中的test()方法
2,如果window.opener存在,设置parent中stockBox的值。
if (window.opener && !window.opener.closed) {
window.opener.document.parent.stockBox.value = symbol;
}
主窗口的刷新你可以用
window.opener.location.reload();
window.showModalDialog()弹出对话框刷新问题的总结
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
参数传递:
1.要向对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
<script>
var obj = new Object();
obj.name="ttop";
window.showModalDialog("test.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
test.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>
window.showModalDialog()刷新父窗口和本窗口的方法及注意:
一.刷新父窗口的方法:
1.使用window.returnValue给父窗口传值,然后根据值判断是否刷新。
① 在window.showModalDialog()打开的窗口页面中用window.returnValue方式设置返回值;
eg:window.returnValue='refresh';
②.在写window.showModalDialog()弹出窗口函数时,定义一个个变量,然后根据变量值操作父窗口是否刷新;
eg:var winPar = window.showModalDialog
(url,'','dialogHeight:400px;dialogWidth:800px;status:no;scroll:no;help:no');
if(winPar == 'refresh'){
window.parent.location.reload(); //当window.showModalDialog窗口关闭时执行
}
winPar为①步骤给showModalDialog()窗口设置的返回值
总结:由于window.showModalDialog函数打开一个IE的模式窗口(就是打开后不能操作父窗口,只能等模式窗口关闭时才能操作),所以想要刷新父窗口只能在模式窗口关闭后执行。用window.returnValue可以向父窗口传值,这样一来可以用从模式窗口向父窗口传递值,然后根据值判断操作父窗口的方式来刷新。这样在任何关闭了模式窗口后父窗口都会自动刷新.
二.刷新模式本窗口
showModalDialog()窗口与window.open()打开的窗口刷新本窗口时不同,showModalDialog()窗口也不能用F5刷新,也没有右键操作
①. 在模式窗口页面中加入:
<base target="_self"> //在html和body之间
<a id="reload" href="本页面url" style="display:none"></a>
②. 在需要执行刷新操作的地方执行以下js:
reload.click();//reload为①中隐藏a标签的id,当然可以换成其它名称
三 注意事项
① 在点击window.showModalDialog()窗口的链接的时候会打开新窗口,想要阻止打开新窗口,需要在窗口页
面中的html和body之间加入: <base target="_self" />即可
② showModalDialog和showModelessDialog有什么不同?
showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。
类似alert的运行效果。
showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一
下而已。
转载于:https://blog.51cto.com/chengjiwang/1364967