使用 window 對象的 open() 方法可以打開一個新窗口。用法如下：
window.open (URL, name, features, replace)
參數列表如下：
- URL：可選字符串，聲明在新窗口中顯示網頁文檔的 URL。如果省略，或者為空，則新窗口就不會顯示任何文檔。
- name：可選字符串，聲明新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的 target 目標值。如果該參數指定了一個已經存在的窗口，那么 open() 方法就不再創建一個新窗口，而只是返回對指定窗口的引用，在這種情況下，features 參數將被忽略。
- features：可選字符串，聲明了新窗口要顯示的標准瀏覽器的特征，具體說明如下表所示。如果省略該參數，新窗口將具有所有標准特征。
- replace：可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目。
該方法返回值為新創建的 window 對象，使用它可以引用新創建的窗口。
| 特征 | 說明 |
|---|---|
| fullscreen = yes | no | 1 | 0 | 是否使用全屏模式顯示瀏覽器。默認是 no。處於全屏模式的窗口同時處於劇院模式 |
| height = pixels | 窗口文檔顯示區的高度。單位為像素。 |
| left = pixels | 窗口的 x 坐標。單位為像素。 |
| location = yes | no | 1 | 0 | 是否顯示地址字段。默認是 yes。 |
| menubar = yes | no | 1 | 0 | 是否顯示菜單欄。默認是 yes。 |
| resizable = yes | no | 1 | 0 | 窗口是否可調節尺寸。默認是 yes。 |
| scrollbars = yes | no | 1 | 0 | 是否顯示滾動條。默認是 yes。 |
| status = yes | no | 1 | 0 | 是否添加狀態欄。默認是 yes。 |
| toolbar = yes | no | 1 | 0 | 是否顯示瀏覽器的工具欄。默認是 yes。 |
| top = pixels | 窗口的 y 坐標 |
| width = pixels | 窗口的文檔顯示區的寬度。單位為元素。 |
新創建的 window 對象擁有一個 opener 屬性，引用打開它的原始對象。opener 只在彈出窗口的最外層 window 對象（top）中定義，而且指向調用 window.open() 方法的窗口或框架。
示例1
下面示例演示了打開的窗口與原窗口之間的關系。
win = window.open(); //打開新的空白窗口 win.document.write ("<h1>這是新打開的窗口</h1>"); //在新窗口中輸出提示信息 win.focus (); //讓原窗口獲取焦點 win.opener.document.write ("<h1>這是原來窗口</h1>"); //在原窗口中輸出提示信息 console.log(win.opener == window); //檢測window.opener屬性值
使用 window 的 close() 方法可以關閉一個窗口。例如，關閉一個新創建的 win 窗口可以使用下面的方法實現。
win.close;
如果在打開窗口內部關閉自身窗口，則應該使用下面的方法。
window.close;
示例2
下面示例演示如何自動彈出一個窗口，然后設置半秒鍾之后自動關閉該窗口，同時允許用戶單擊頁面超鏈接，更換彈出窗口內顯示的網頁 URL。
var url = "c.biancheng.net"; //要打開的網頁地址 var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no, status=no"; //設置新窗口的特性 //動態生成一個超鏈接 document.write('<a href="c.biancheng.net" target="newW">切換到C語言中文網首頁</a>'); var me = window.open(url, "newW", featrues); //打開新窗口 setTimeout (function () { //定時器 if (me.closed) { console.log("創建的窗口已經關閉。"); } else { me.close(); } }, 5000); //半秒鍾之后關閉該窗口
示例3
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>打開新窗口</title> <script type="text/javascript" > function OpenMyWinN(surl,w,h){ window.open(surl, "popUpMyWinN", "scrollbars=yes,resizable=yes,statebar=no,width="+w+",height="+h+",left=200, top=100"); } </script> </head> <body> <table width="98%" border="0" cellpadding="1" cellspacing="1" align="center" class="tbtitle" style="background:#cfcfcf;"> <tr> <td height="28" colspan="11" bgcolor="#EDF9D5" background='images/tbg.gif'> <table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30%" style="padding-left:10px;"><strong>訂單列表：</strong> </td> <td width="45%" align="right" style="padding-top:4px"> <input type="button" name="ss13" value="未付款" sonClick="javascript:OpenMyWinN('#',680,450);" class='np coolbg'/> </td> </tr> </table> </td> </tr> </table> <a href="javascript:OpenMyWinN('shops_operations_cart.php?oid=S-P1586654454RN545',680,450);" >[詳情]</a>
效果如下圖：
參考文檔：使用 window 對象的 open() 方法可以打開一個新窗口
日期：2020.1.22 lzb