Several ways to open new windows in JavaScript

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

1. window.location.href

   window.location.href="https://www.cnblogs.com/guorongtao/";     //在当前窗口中打开窗口
   类似于HTML:
   <a href="https://www.cnblogs.com/guorongtao/" title="测试1">Welcome Test1</a>
   

2. window.open

   window.open("https://www.cnblogs.com/guorongtao/");      //在另外新建窗口中打开窗口
   类似于HTEL:
   <a href="https://www.cnblogs.com/guorongtao/" title="测试2" target="_blank">Welcome Test2</a>
   

   • specify parameters

     window.open('http://example.com', '_blank', {
             
             
       headers: {
             
             
         Authorization: 'Bearer <token>'
       }
     });
     

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

     • NewUrl //' The address of the pop-up window;
     • 'newwindow' //The name of the pop-up window, not required, can be replaced by empty '';
     • height=600 //window height;
     • width=900 //window width;
     • top=0 //The pixel value from the window to the top of the screen;
     • left=0 //The pixel value from the window to the left side of the screen;
     • toolbar=no //Whether to display the toolbar, yes is to display;
     • menubar, scrollbars //Indicates the menu bar and scroll bar.
     • resizable=no //Whether it is allowed to change the window size, yes is allowed;
     • location=no //Whether to display the address bar, yes is allowed;
     • status=no //Whether to display the information in the status bar, yes is allowed;

3. window.showModalDialog

   Some browsers do not support

   var URL='https://www.cnblogs.com/guorongtao'
   window.showModalDialog(URL,'','DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no');
   

   • sURL //Required parameter, type: string. Used to specify the URL of the document to be displayed by the dialog.
   • vArguments //Optional parameters, type: variant. Used to pass parameters to the dialog. The type of parameters passed is not limited, including arrays, etc. The dialog box obtains the parameters passed in through window.dialogArguments.
   • sFeatures //Optional parameter, type: string. Used to describe the appearance of the dialog box and other information, you can use one or more of the following, separated by a semicolon ";".
   • dialogHeight//height of the dialog box, not less than 100px, the default unit of dialogHeight and dialogWidth in IE4 is em, and in IE5 is px, for convenience, when defining a modal dialog box, use px as the unit.
   • dialogWidth: //dialog width.
   • dialogLeft: //The distance from the left side of the desktop.
   • dialogTop: //The distance from the desktop.
   • center: {yes | no | 1 | 0 }: //Whether the window is centered, the default is yes, but the height and width can still be specified.
   • help: {yes | no | 1 | 0 }: // Whether to display the help button, the default is yes.
   • resizable: {yes | no | 1 | 0 } [IE5+]: // Whether the size can be changed. The default is no.
   • status: {yes | no | 1 | 0 } [IE5+]: // Whether to display the status bar. Default is yes[Modeless] or no[Modal].
   • scroll:{ yes | no | 1 | 0 | on | off }: // Indicate whether the dialog box displays scroll bars. The default is yes.

   incoming parameters

   //test1.htm
   <script>
     var mxh1 = new Array("mxh","net_lover","孟子E章")
     var mxh2 = window.open("about:blank","window_mxh")
     // 向对话框传递数组
     window.showModalDialog("test2.htm",mxh1)
     // 向对话框传递window对象
     window.showModalDialog("test3.htm",mxh2)
   </script>
    
   //test2.htm
   <script>
     var a = window.dialogArguments
     alert("您传递的参数为：" + a)
   </script>
    
   //test3.htm
   <script>
     var a = window.dialogArguments
     alert("您传递的参数为window对象，名称：" + a.name)
   </script>
   

   Return information to the window that opens the dialog box through window.returnValue, which can also be an object

   //test4.htm
   <script>
     var a = window.showModalDialog("test5.htm")
     for(i=0;i<a.length;i++) alert(a[i])
   </script>
    
   //test5.htm
   <script>
   function sendTo()
   {
           
           
     var a=new Array("a","b")
     window.returnValue = a
     window.close()
   }
   </script>
    
   <form>
     <input value="返回" type=button onclick="sendTo()">
   </form>