資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學解釋 ES6 中的頁面重定向？
本教程將介紹 JavaScript ES6 版本中引入的頁面重定向。頁面重定向是一種從當前 URL 將網頁訪問者傳送到另一個 URL 的方法。我們可以將使用者重定向到同一網站的不同網頁，或其他網站或伺服器。
在 JavaScript 中，視窗是一個全域性物件，其中包含 location 物件。我們可以使用 location 物件的不同方法進行 ES6 中的頁面重定向，這正是我們將在下面學習的內容。
使用 window.location 物件的 href 屬性值
視窗全域性物件的 location 物件包含 href 屬性。location 物件包含有關您當前所在網頁位置的所有資訊。location 物件的“href”屬性包含當前 URL。
要將訪問者重定向到不同的 URL，我們需要更改 Web 瀏覽器中的當前 URL，這可以透過更改 location 物件的 href 屬性值來實現。
語法
使用者可以按照以下語法透過更改 href 屬性的值來將訪問者重定向到另一個頁面。
window.location = "<new_URL>"; window.location.href = "<new_URL>";
在上述語法中，如果我們將新的 URL 值賦給 window.location 物件，則預設情況下會更改 location 物件的 href 屬性的值。
示例
在下面的示例中，我們建立了一個帶有文字“重定向到另一個網頁”的按鈕。當用戶單擊該按鈕時，我們將呼叫 JavaScript 的 redirect() 函式。
在 redirect() 函式中，我們更改了 location 物件的 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.href="https://tutorialspoint.tw/"
}
</script>
</body>
</html>
使用 location.assign() 方法
assign() 是在 location 物件內定義的方法。我們可以使用 location.assign() 方法在瀏覽器視窗中載入新文件，在瀏覽器中重新載入新文件意味著重定向。
語法
請按照以下語法使用 assign() 方法進行重定向。
window.location.assign("<new_URL>");
在上述語法中，我們使用 location 物件作為引用來呼叫 assign() 方法。
引數
New_URL − 這是我們想要將使用者重定向到的 URL。
示例
在這個例子中，我們使用了 location 物件的 assign() 方法在當前瀏覽器視窗中載入另一個網頁。
<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://tutorialspoint.tw ");
}
</script>
</body>
</html>
使用 location.replace() 方法
location 物件的 replace() 方法的工作方式與 assign() 方法相同。replace() 和 assign() 方法之間的唯一區別在於，replace() 方法用歷史堆疊中的新 URL 替換當前 URL。因此，它不允許歷史堆疊包含有關先前網頁的資訊，這意味著使用者無法返回。
assign() 方法向歷史堆疊新增新條目。因此，使用者可以使用 Web 瀏覽器的後退按鈕返回上一頁。
語法
使用者可以按照以下語法使用 replace() 方法進行頁面重定向。
Window.location.replace("<redirection_URL>")
引數
Redirection_URL − 重定向 URL 是我們要將網頁訪問者重定向到的新 URL。
示例
在這個例子中，我們使用了 location 物件的 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://tutorialspoint.tw");
}
</script>
</body>
</html>
此外，使用者還可以使用 window 物件的 navigate() 方法進行重定向。navigate() 方法已棄用，因此不推薦用於重定向。
我們學習了 3 到 4 種將使用者重定向到不同網頁的方法。使用者可以根據自己的需求使用任何方法。例如，如果他們想替換當前 URL，請使用 replace() 方法；否則，請使用 assign() 方法。使用者可以使用 reload() 方法來獲取新的伺服器資料。
瀏覽量 181 次
