在 JavaScript 中更改頁面

Shraddha Paghdar 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 window.open() 更改頁面
  2. 在 JavaScript 中使用 window.location 更改頁面
在 JavaScript 中更改頁面

Location 介面表示它所連結的物件的位置 (URL)。DocumentWindows 介面有一個可以通過 document.locationwindow.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=valuename 的新標籤頁的逗號分隔視窗屬性。

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

關於 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 物件還包含其他屬性,例如 hrefprotocolhosthostnameport 等。

你還可以使用 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。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn