在 JavaScript 中更改頁面
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。
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