JavaScript window.open()用法及代碼示例

Javascript window.open() 方法用於打開具有指定 URL 和名稱的新選項卡或窗口。它支持各種參數，可用於指定要打開的窗口的類型和 URL 位置。

用法:

window.open(url, windowName, windowFeatures)

參數：它具有以下參數，如上所述並描述如下：

URL:它接受將在新窗口中打開的 URL。如果提供了一個空字符串，那麽它將打開一個空白的新選項卡。
windowName:它可用於提供窗口的名稱。這不以任何方式與窗口的標題相關聯。它可以接受 _blank、_self、_parent 等值。
windowFeatures:它用於為將打開的窗口提供特征，例如窗口的尺寸和位置。

範例1：在此示例中，我們將使用指定參數單擊按鈕打開一個新窗口。

HTML


<!DOCTYPE html>
  
<head>
    <style>
        body {
            background-color:#272727;
            display:flex;
            justify-content:center;
            align-items:center;
            margin-top:20%;
        }
  
        .main {
            width:30%;
            height:100%;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            background-color:rgb(82, 82, 82);
            margin:10px;
            font-family:'Roboto', sans-serif;
        }
  
        .btn {
            width:100%;
            height:50px;
            background-color:rgb(29, 29, 29);
            color:white;
            font-size:20px;
            border:none;
            cursor:pointer;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <h1>Click the button to open a new window.</h1>
        <button class="btn">Open</button>
    </div>
    <script>
        document.querySelector('.btn')
            .addEventListener('click', function () {
                window.open('https://www.geeksforgeeks.org/',
                    '_blank',
                    'width=400,height=400 top=200,left=600');
            });
    </script>
</body>
  
</html>

輸出：

範例2：在此示例中，我們將通過將 URL 作為空字符串傳遞來打開一個空白窗口。

HTML


<!DOCTYPE html>
  
<head>
    <style>
        body {
            background-color:#272727;
            display:flex;
            justify-content:center;
            align-items:center;
            margin-top:20%;
        }
  
        .main {
            width:30%;
            height:100%;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            background-color:rgb(82, 82, 82);
            margin:10px;
            font-family:'Roboto', sans-serif;
        }
  
        .btn {
            width:100%;
            height:50px;
            background-color:rgb(29, 29, 29);
            color:white;
            font-size:20px;
            border:none;
            cursor:pointer;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <h1>Click the button to open a new window.</h1>
        <button class="btn">Open</button>
    </div>
</body>
  
<script>
    document.querySelector('.btn')
      .addEventListener('click', function () {
        window.open('',
                    '_blank',
                    'width=400,height=400 top=200,left=600');
    });
</script>
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自iamgaurav大神的英文原創作品 JavaScript window.open() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。