JavaScript Window 打开新窗口的几种方式 window.location.href、window.open、window.showModalDialog

1、方式1: window.location.href

1.  

   window.location.href=”https://www.cnblogs.com/guorongtao/”;     //在当前窗口中打开窗口

2.  
    
3.  

   类似于HTML:

4.  
    
5.  

   <a href=”https://www.cnblogs.com/guorongtao/” title=”测试1″>Welcome Test1</a>

　2、方式2: window.open

1.  

   window.open(“https://www.cnblogs.com/guorongtao/”);      //在另外新建窗口中打开窗口

2.  
    
3.  

   类似于HTEL:

4.  
    
5.  

   <a href=”https://www.cnblogs.com/guorongtao/” title=”测试2″ target=”_blank”>Welcome Test2</a>

指定参数：

1.  

   <script >

2.  
    
3.  

     var NewUrl = ‘www.baidu.com’ ;      

4.  
    
5.  

     window.open(NewUrl,’newindow’,’height=600,width=900,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no’);

6.  
    
7.  

   </script > 

参数说明：

• NewUrl  //’ 弹出窗口的地址； 
• ‘newwindow’   //弹出窗口的名字，非必须，可用空”代替； 
• height=600 //窗口高度； 
• width=900 //窗口宽度； 
• top=0 //窗口距离屏幕上方的象素值； 
• left=0 //窗口距离屏幕左侧的象素值； 
• toolbar=no //是否显示工具栏，yes为显示； 
• menubar，scrollbars //表示菜单栏和滚动栏。 
• resizable=no //是否允许改变窗口大小，yes为允许； 
• location=no //是否显示地址栏，yes为允许； 
• status=no //是否显示状态栏内的信息，yes为允许；　　　　

3、方式3 window.showModalDialog (部分浏览器不支持)

1. var URL=’https://www.cnblogs.com/guorongtao’

2. window.showModalDialog(URL,”,’DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no’);

原型：

vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures]) 

参数说明：

•  sURL  //必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
•  vArguments  //可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
•  sFeatures  //可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
•  dialogHeight// 对话框高度，不小于100px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
•  dialogWidth: //对话框宽度。
•  dialogLeft: //距离桌面左的距离。
•  dialogTop: //离桌面上的距离。
•  center: {yes | no | 1 | 0 }：//窗口是否居中，默认yes，但仍可以指定高度和宽度。
•  help: {yes | no | 1 | 0 }：//是否显示帮助按钮，默认yes。
•  resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：//是否可被改变大小。默认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个字符。也可以传递对象，例如：

1.  

   //test1.htm

2.  

   <script>

3.  

   var mxh1 = new Array(“mxh”,”net_lover”,”孟子E章”)

4.  

   var mxh2 = window.open(“about:blank”,”window_mxh”)

5.  

   // 向对话框传递数组

6.  

   window.showModalDialog(“test2.htm”,mxh1)

7.  

   // 向对话框传递window对象

8.  

   window.showModalDialog(“test3.htm”,mxh2)

9.  

   </script>

10.  
     
11.  

    //test2.htm

12.  

    <script>

13.  

    var a = window.dialogArguments

14.  

    alert(“您传递的参数为：” + a)

15.  

    </script>

16.  
     
17.  

    //test3.htm

18.  

    <script>

19.  

    var a = window.dialogArguments

20.  

    alert(“您传递的参数为window对象，名称：” + a.name)

21.  

    </script>

可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

1.  

   //test4.htm

2.  

   <script>

3.  

   var a = window.showModalDialog(“test5.htm”)

4.  

   for(i=0;i<a.length;i++) alert(a[i])

5.  

   </script>

6.  
    
7.  

   //test5.htm

8.  

   <script>

9.  

   function sendTo()

10.  

    {

11.  

    var a=new Array(“a”,”b”)

12.  

    window.returnValue = a

13.  

    window.close()

14.  

    }

15.  

    </script>

16.  
     
17.  

    <form>

18.  

    <input value=”返回” type=button onclick=”sendTo()”>

19.  

    </form>

4、Window 其他参考　

• window.open() – 打开新窗口
• window.close() – 关闭当前窗口
• window.moveTo() -移动当前窗口
• window.resizeTo() -重新调整当前窗口