window.open()和window.showModalDialog()


本文主要讲解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:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而已。

相关内容

    暂无相关文章