快捷導(dǎo)航

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

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

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

1 方法介紹

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

這個(gè)方法的語(yǔ)法是：

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

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

2 參數(shù)說(shuō)明

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

name 可選參數(shù)：新窗口的名稱，默認(rèn)_blank。可以是任何字符串，有以下幾種情況：

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

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

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：是否顯示滾動(dòng)條，yes\no。

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

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

當(dāng) 指定 features 參數(shù)時(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è)置，也不會(huì)發(fā)生變化。

3 使用示例

3.1 當(dāng)前窗口中打開(kāi)網(wǎng)頁(yè)

使用示例：

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)前頁(yè)面中打開(kāi)
            window.open("https://www.baidu.com/","_self");
        })
    </script>
</body>
</html>

拓展：

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

使用示例：

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

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

3.2 新窗口中打開(kāi)網(wǎng)頁(yè)

使用示例：

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(){
            //新窗口中打開(kāi)
            //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()的返回值賦給一個(gè)變量item，打印結(jié)果如下：

3.3 在獨(dú)立窗口中打開(kāi)一個(gè)指定大小和位置的網(wǎng)頁(yè)

示例代碼：

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é)果展示：