本教程將介紹 ES6 版本 JavaScript 中引入的頁面重定向。頁面重定向是一種將網頁訪問者從當前 URL 發送到另一個 URL 的方法。我們可以將用戶重定向到同一網站的不同網頁或另一個網站或服務器。
在 JavaScript 中，窗口是一個包含位置對象的全局對象。我們可以在 ES6 中使用 location 對象的不同方法來進行頁面重定向，這就是我們下面要學習的內容。
使用window.location對象的href屬性值
窗口全局對象的location對象包含href屬性。位置對象包含有關您當前所在網頁的位置的所有信息。位置對象的“href”屬性包含當前 URL。
要將訪問者重定向到不同的 URL，我們需要更改 Web 瀏覽器中的當前 URL，這可以通過更改 location 對象的 href 屬性的值來實現。
語法
用戶可以按照以下語法通過更改 href 屬性的值將訪問者重定向到另一個頁面。
window.location = "<new_URL>"; window.location.href = "<new_URL>";
登錄后復制
在上面的語法中，如果我們為 window.location 對象分配一個新的 URL 值，默認情況下，會更改 location 對象的 href 屬性的值。
示例
在下面的示例中，我們創建了帶有文本“重定向到另一個網頁”的按鈕。當用戶單擊按鈕時，我們將調用 JavaScript 的 redirect() 函數。
在redirect()函數中，我們正在更改位置對象的href屬性的值，這會將訪問者帶到新的URL。
<html>
<body>
<h2>Using window.location.href attribute for page redirection</h2>
<p>Click below button to redirect </p>
<button id="redirect" onclick="redirect()">
Redirect to the another webpage
</button>
<script type="text/javascript">
function redirect(){
window.location.
}
</script>
</body>
</html>
登錄后復制
使用location.assign()方法
assign() 是在位置對象內部定義的方法。我們可以使用location.assign()方法在瀏覽器窗口中加載新文檔，在瀏覽器中重新加載新文檔意味著重定向。
語法
按照下面的語法使用 allocate() 方法進行重定向。
window.location.assign("<new_URL>");
登錄后復制
在上面的語法中，我們將位置對象作為引用來調用 allocate() 方法。
參數
New_URL – 這是我們要重定向用戶的 URL。
示例
在此示例中，我們使用位置對象的 allocate() 方法在當前瀏覽器窗口中加載另一個網頁。
<html>
<body>
<p>Using the <i>window.location.assign()</i> method to redirect users to another webpage.</p>
<button id="redirect" onclick="redirect()">Redirect </button>
<script type="text/javascript">
function redirect(){
window.location.assign("https://www.tutorialspoint.com ");
}
</script>
</body>
</html>
登錄后復制
使用location.replace()方法
位置對象的replace()方法與assign()方法的工作方式相同。 Replace() 和 allocate() 方法之間的唯一區別是，replace() 方法用歷史堆棧中的新 URL 替換當前 URL。因此，它不允許歷史堆棧包含有關前一個網頁的信息，這意味著用戶無法返回。
assign() 方法向歷史堆棧添加一個新條目。因此，用戶可以使用網絡瀏覽器的后退按鈕返回到上一頁。
語法
用戶可以按照以下語法使用replace()方法進行頁面重定向。
Window.location.replace("<redirection_URL>")
登錄后復制
參數
Redirection_URL – 重定向 URL 是我們要重定向網頁訪問者的新 URL。
示例
在此示例中，我們使用位置對象的replace()方法將用戶重定向到新網頁。在輸出中，用戶可以嘗試在重定向后單擊后退按鈕返回。 Replace() 方法不允許返回。
<html>
<body>
<p>Using the <i>window.location.replace()</i> method to redirect users to another webpage.</p>
<button id="redirect" onclick="redirect()">Redirect </button>
<script type="text/javascript">
function redirect(){
window.location.replace("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
登錄后復制
此外，用戶還可以使用窗口對象的navigate()方法進行重定向。 navigate() 方法已被棄用，因此不建議用于重定向。
我們學習了 3 到 4 種將用戶重定向到不同網頁的方法。用戶可以根據自己的需要使用任何方法。例如，如果他們想要替換當前的 URL，請使用 Replace() 方法；否則，請使用 allocate() 方法。用戶可以使用reload()方法來獲取新的服務器數據。
以上就是解釋一下 ES6 中的頁面重定向？的詳細內容，更多請關注www.92cms.cn其它相關文章！
