打开新窗口，window.open 和window.showModalDialog

Posted 2020-11-10 缘在此季

window.open:

 window.open是非阻态窗口，也叫非模态窗口，也就是说当你打开window.open这个子窗口后，还可以切换去操作父窗口。

一般的格式是这样的：

 

 

1. <span style="font-size:14px;"><strong>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‘)   //该句写成一行代码</strong></span>  

其中参数： 

 

window.open 弹出新窗口的命令；
　　‘page.html‘ 弹出窗口的文件名； 
　　‘newwindow‘ 弹出窗口的名字（不是文件名），非必须，可用空‘‘代替； 
　　height=100 窗口高度； 
　　width=400 窗口宽度； 
　　top=0 窗口距离屏幕上方的象素值； 
　　left=0 窗口距离屏幕左侧的象素值； 
　　toolbar=no 是否显示工具栏，yes为显示； 
　　menubar，表示菜单栏

     scrollbars 表示滚动栏，为yes表示页面允许滚动
　　resizable=no 是否允许改变窗口大小，yes为允许； 
　　location=no 是否显示地址栏，yes为允许； 
　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

window.showModalDialog：

window.showModalDialog表示阻态窗口，也就是打开这个窗口后，在关闭之前，不允许操作父窗口

一般的格式是这样的：

 

 

1. <strong>window.showModalDialog("modal.htm","","dialogWidth=200px;dialogHeight=100px"); </strong>  

有些参数：

 

dialogHeight:   对话框高度，不小于100px
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:     默认为no。

一般的还要与父窗口产生交互，分别使用的是window.opener和window.dialogArguments,具体的使用方法可以在网上百度，

以后了解了也会补充的

（2017-3-17 18:37:27）

（补充：比如在A页面上使用window.showModalDialog 来打开一个页面B并且向其穿值过去，传值可以有多种包括数组，对象等，形式如：（在A页面上的js中）

 

 

1. var obj = new Object();  
2.           obj.name="51js";  
3.     var jieshou = window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");  

 

,然后在B页面上接收就可以这样写：

 

 

1. var obj = window.dialogArguments  
2.           alert("您传递的参数为：" + obj.name)  

这样就表示是你接收A页面上传过来的值，怎么杨勇就是你的事了，

 

然后又想关闭页面的时候再传一个值给A页面，在B页面上这样写：

 

1. window.returnValue="你好";  

这样，A页面js中定义的jieshou的变量就是接收到了B页面上返回的值，这样就实现了一种子窗口和父窗口交互的形式！）

然后是window.open的父窗口和子窗口的交互是怎么样的呢？

比如父窗口的传参是这样的，一般来是以字符串的形式来传的，具体可以不可以传其他形式的，我目前没去深究。

 

 

1. function openTable(id){    
2. var feathers="status=no,width=650px,height=670px,top=0px,menubar=no,resizable=no,scrollbars=yes,toolbar=no,channelmode=no";    
3. var openWin = window.open("allInfo.html?"+id+","+new Date().getTime(),"declare",feathers);    
4. openWin.focus();    
5. }   

 

然后子窗口用window.location.search来接收问号（？）后面的值，然后再拆分字符串，得到自己想要的值。

 

 

 

1. <span style="font-size:24px;"><script type="text/javascript">    
2.     var params= window.location.search;//params:?id,date    
3.         
4.     var arr = params.substring(1).split(",");    
5.         
6.     var id = arr[0];    
7. </script>  </span>  

这样就可以得到ID，window.opener是子窗口直接操作父窗口的一种用法，比如说，子窗口关闭时候，调用window.opener.location.reload()，就可以刷新，还比如说，在子窗口页面直接操作父窗口的数据，如：window.opener.document.getElementById("name").value = "输入的数据";来通过js的方式来取值或者赋值。