window.open()開啟新視窗教程

賴忠標發表於2021-01-22

使用 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

 

 

 

 

相關文章