快捷導(dǎo)航

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

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

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

1 方法介紹

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

這個方法的語法是：

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

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

2 參數(shù)說明

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

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

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

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

width：窗口的寬度；
height：窗口的高度；
top：窗口距離屏幕頂部的距離，默認(rèn)0；
left：窗口距離屏幕左側(cè)的距離，默認(rèn)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 是否替換當(dāng)前頁面的歷史記錄。如果為 true，則新的 URL 會替換當(dāng)前頁面的歷史記錄，用戶點(diǎn)擊瀏覽器的“返回”按鈕時會回到上一個頁面；如果為 false，則新的 URL 會添加到當(dāng)前頁面的歷史記錄中，用戶點(diǎn)擊瀏覽器的“返回”按鈕時會回到上一個 URL。

以下幾點(diǎn)需要注意：

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

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

3 使用示例

3.1 當(dāng)前窗口中打開網(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(){
            //當(dāng)前頁面中打開
            window.open("https://www.baidu.com/","_self");
        })
    </script>
</body>
</html>

拓展：

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

使用示例：

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

需要注意的是，window.location.href 屬性是可讀可寫的，在設(shè)置它的值時可以直接跳轉(zhuǎn)到其他網(wǎng)頁。因此在使用時需要小心，以免不小心導(dǎo)致頁面跳轉(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 在獨(dú)立窗口中打開一個指定大小和位置的網(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é)果展示：