在 JavaScript 中更改頁面

1. 在 JavaScript 中使用 window.open() 更改頁面
2. 在 JavaScript 中使用 window.location 更改頁面

Location 介面表示它所連結的物件的位置 (URL)。Document 和 Windows 介面有一個可以通過 document.location 或 window.location 訪問的連結位置。

每個之間最大的區別是它們與瀏覽器的相容性。window.location 在所有相容的瀏覽器上都是讀/寫的。

document.location 在 IE 中是隻讀的；但是，在 Firefox 等基於 Gecko 的瀏覽器中，它是讀/寫的。

JavaScript 提供了代表瀏覽器視窗與瀏覽器通訊的最重要的視窗物件。

所有全域性變數函式都成為視窗物件的成員。視窗位置物件用於獲取當前頁面的 URL，也用於更改重定向 URL。

在今天的文章中，我們將學習如何在 JavaScript 中更改頁面。JavaScript 視窗物件提供了 2 種方式；第一個使用 location 屬性，第二個使用 open 方法。

在 JavaScript 中使用 window.open() 更改頁面

window.open() 是 JavaScript 提供的視窗介面方法，它將指定的 URL/資源載入到具有指定名稱的新標籤頁或現有瀏覽器中。此方法將生成一個新視窗以開啟指定的 URL。

每次 window.open() 方法返回時，視窗都會包含 about:blank。當前指令碼塊執行完畢後，將載入實際的 URL。

語法：

window.open(url, windowName, windowFeatures);

url 是一個必需引數，它接受有效的 URL、影象路徑或瀏覽器支援的其他資源。如果空字串通過，則會開啟一個帶有空 URL 的新標籤頁。

windowName 是一個可選引數，用於指定瀏覽上下文的名稱。它不設定視窗標題。

此外，此視窗的名稱不得包含空格。

windowFeatures 是一個可選引數。如果屬性是布林值，此引數接受形式為 name=value 或 name 的新標籤頁的逗號分隔視窗屬性。

一些選項是視窗物件的預設位置和大小。

關於 Window.location 函式的更多資訊可以在這個文件中找到。

例子：

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

function openGoogleByMethod() {
  window.open('https://www.google.com');
}

我們在程式碼中使用了 window 物件的 open 方法，它將在新標籤頁中開啟請求的 URL。

在 JavaScript 中使用 window.location 更改頁面

它是 Window.location 的只讀屬性，返回 Location 物件。此物件包含有關文件當前位置的資訊。

這個 Location 物件還包含其他屬性，例如 href、protocol、host、hostname、port 等。

你還可以使用 location 直接訪問 window.location 屬性，因為視窗物件始終位於作用域鏈的頂部。

使用者可以使用 href 屬性或 Location 物件的 assign 方法來載入/開啟另一個 URL/資源。

語法：

window.location = URL_PATH;
window.location.href = URL_PATH;
window.location.assign(URL_PATH);

URL_PATH 是一個必需引數，它接受必須開啟的有效 URL。此 URL 可以是絕對 URL、相對 URL、錨 URL 或新協議。

例子：

<button type="button" id="btn" onclick="openGoogle()">Open Google</button>

function openGoogle() {
  window.location = 'https://www.google.com';
  window.location.href = 'https://www.google.com';
}

在程式碼中，我們使用了 window 物件的 location 屬性，它將使用同一標籤頁中的現有 URL 更改請求的 URL。