JavaScript中的Window.open()用法示例詳解

更新時間：2023年07月27日 15:29:14 作者：孫?悟?空

這篇文章主要給大家介紹了關于JavaScript中Window.open()用法的相關資料,今天在項目中用到了彈出子窗口,就想到了用JavaScript實現(xiàn)的兩種方法,其中一個就是window.open(),需要的朋友可以參考下

1 方法介紹

window.open() 方法是 JavaScript 中的一個內(nèi)置方法，用于在瀏覽器中打開一個新的窗口或標簽頁。

這個方法的語法是：

window.open(url, name, features, replace);

需要注意的是，由于彈出窗口的濫用已經(jīng)成為了一個安全問題，現(xiàn)代瀏覽器通常會默認阻止 window.open() 方法的調(diào)用，除非是在用戶的交互下觸發(fā)的。因此，在實際的開發(fā)中，我們需要謹慎使用這個方法，避免被瀏覽器誤認為是惡意行為。

2 參數(shù)說明

url 必選參數(shù)：要打開的 URL 地址?？梢允侨魏斡行У?URL，包括 HTTP、HTTPS、FTP 等協(xié)議。

name 可選參數(shù)：新窗口的名稱，默認_blank?？梢允侨魏巫址?，有以下幾種情況：

_self：當前窗口中打開。
_blank 或者不寫該參數(shù)：新窗口中打開，窗口name為空字符串。
任何字符串 新窗口中打開，窗口name為任何字符串。如果指定的名稱已經(jīng)存在，則會在該窗口中打開該 URL，而不是新建一個窗口。

features 可選參數(shù)：一個逗號分隔的字符串，指定新窗口的一些特性。這個字符串中可以包含以下屬性：

width：窗口的寬度；
height：窗口的高度；
top：窗口距離屏幕頂部的距離，默認0；
left：窗口距離屏幕左側(cè)的距離，默認0；
menubar：是否顯示菜單欄，yes\no；
toolbar：是否顯示工具欄，yes\no；
location：是否顯示地址欄，yes\no；
status：是否顯示狀態(tài)欄，yes\no；
resizable：是否允許用戶調(diào)整窗口大小，yes\no；
scrollbars：是否顯示滾動條，yes\no。

replace 可選參數(shù)：一個布爾值，指定新打開的 URL 是否替換當前頁面的歷史記錄。如果為 true，則新的 URL 會替換當前頁面的歷史記錄，用戶點擊瀏覽器的“返回”按鈕時會回到上一個頁面；如果為 false，則新的 URL 會添加到當前頁面的歷史記錄中，用戶點擊瀏覽器的“返回”按鈕時會回到上一個 URL。

以下幾點需要注意：

當指定 features 參數(shù)時， width和 height 是必須明確給出值，否則，features 參數(shù)將不起作用。

features 參數(shù)中， width、 height、top、 left是常用的參數(shù)。menubar、toolbar、location、status、resizable、scrollbars 參數(shù)已經(jīng)被大部分瀏覽器棄用（為了更好的用戶體驗），因此即使進行了相關設置，也不會發(fā)生變化。

3 使用示例

3.1 當前窗口中打開網(wǎng)頁

使用示例：

window.open("https://www.baidu.com/","_self");

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            height: 50px;
            width: 200px;
            border: 1px solid black;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }
        #btn:hover{
            border: 1px solid rgb(14, 102, 202);
            background-color: rgb(80, 180, 113);
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="btn">百度一下</div>
    <script>
        var myBtn = document.getElementById('btn');
        myBtn.addEventListener('click',function(){
            //當前頁面中打開
            window.open("https://www.baidu.com/","_self");
        })
    </script>
</body>
</html>

拓展：

當前窗口中打開也可以使用 window.location.href，它是 JavaScript 中的一個屬性，表示當前網(wǎng)頁的 URL 地址。它可以用來獲取當前網(wǎng)頁的 URL，也可以用來跳轉(zhuǎn)到其他網(wǎng)頁。

使用示例：

console.log(window.location.href); // 輸出當前網(wǎng)頁的 URL 地址
window.location.; // 跳轉(zhuǎn)到 https://www.example.com

需要注意的是，window.location.href 屬性是可讀可寫的，在設置它的值時可以直接跳轉(zhuǎn)到其他網(wǎng)頁。因此在使用時需要小心，以免不小心導致頁面跳轉(zhuǎn)。

3.2 新窗口中打開網(wǎng)頁

使用示例：

window.open("https://www.baidu.com/");

window.open("https://www.baidu.com/","_blank");

window.open("https://www.baidu.com/","任何字符串");

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            height: 50px;
            width: 200px;
            border: 1px solid black;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }
        #btn:hover{
            border: 1px solid rgb(14, 102, 202);
            background-color: rgb(80, 180, 113);
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="btn">百度一下</div>
    <script>
        var myBtn = document.getElementById('btn');
        myBtn.addEventListener('click',function(){
            //新窗口中打開
            //var item1 = window.open("https://www.baidu.com/");
            //var item2 = window.open("https://www.baidu.com/","_blank");
            var item3 = window.open("https://www.baidu.com/","任何字符串");
            console.log('item',item3);
        })
    </script>
</body>
</html>

為便于理解name參數(shù)的含義，將Window.open()的返回值賦給一個變量item，打印結(jié)果如下：

3.3 在獨立窗口中打開一個指定大小和位置的網(wǎng)頁

示例代碼：

window.open(url, "_blank", "width=800,height=300,top = 200, left=400");

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            height: 50px;
            width: 200px;
            border: 1px solid black;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }
        #btn:hover {
            border: 1px solid rgb(14, 102, 202);
            background-color: rgb(80, 180, 113);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="btn">百度一下</div>
    <script>
        var myBtn = document.getElementById('btn');
        myBtn.addEventListener('click', function () {
            var url = "https://www.baidu.com/";
            window.open(url, "_blank", "width=800,height=300,top = 200, left=400");
        })
    </script>
</body>
</html>

結(jié)果展示：