資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律如何在 JavaScript 中強制頁面載入另一個頁面？
在 JavaScript 中，我們可以使用 window.location 物件來強制頁面載入另一個頁面。我們可以使用 location 物件來設定新頁面的 URL。有不同的方法 - window.location.href 屬性、window.location.assign() 和 window.location.replace() 方法，可以使用 location 物件來設定新頁面的 URL。在本教程中，我們將詳細討論每個屬性和方法。
Window.location.replace
第一種方法是使用window.location.href 屬性。此屬性包含有關頁面當前 URL 的資訊，可用於將使用者重定向到新頁面。
語法
window.location.href = "new_url";
使用者將立即重定向到指定的 URL (new_url)。
為了在經過指定的時間後重定向使用者，我們還可以指定 setTimout 函式，該函式允許使用者在函式中指定的時間後重定向到源 URL。
setTimeout(function() {
window.location.href = "https://tutorialspoint.tw";
}, 3000);
以上示例將在 3 秒後將使用者重定向到給定的 URL (https://tutorialspoint.tw)。
示例
在此示例中，我們定義了一個按鈕（載入），單擊該按鈕時會呈現函式 forceLoad()。在 forceLoad() 函式中，我們使用 window.location.href 屬性重新載入新頁面 - tutorialspoint 主頁。
<html>
<body>
<h2>Forced Load page using window.location.href property</h2>
<p>Click on the below button to force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.href = "https://tutorialspoint.tw";
}
</script>
</body>
</html>
window.location.replace
強制重定向到另一個頁面的另一種方法是使用 window.location.replace 屬性。此方法有助於用另一個頁面替換瀏覽器歷史記錄中的當前頁面，但在此處使用者將無法返回到原始頁面。
語法
window.location.replace("new_url");
在此語法中，我們將具有與 window.location.href 示例相同的效果，但這裡的區別在於使用者的當前頁面不會儲存在瀏覽器的歷史記錄中。
示例
在此示例中，我們定義了一個按鈕（載入），單擊該按鈕時會呈現函式 forceLoad()。forceLoad() 函式呈現一個 JavaScript 方法 - location.replace()，該方法用函式中提供的 URL 中的頁面替換當前源。
請注意，導航發生後，它不允許使用者導航回上一個頁面，而在 javascript 中使用 location.assign() 屬性的情況下則可以。
<html>
<body>
<h2>Forced Load page using window.location.replace() method</h2>
<p>Click below button force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.replace("https://tutorialspoint.tw");
}
</script>
</body>
</html>
window.location.assign
在此方法中，我們使用 window.location.assign 方法，該方法用於將新頁面新增到瀏覽器的歷史記錄中，允許使用者返回到使用者瀏覽的原始頁面。
語法
window.location.assign("new_url");
在此語法中，它將具有與 window.location 示例相同的效果，但這裡的區別在於使用者的當前頁面將儲存在瀏覽器的歷史記錄中。
示例
在此示例中，我們定義了一個按鈕（載入），單擊該按鈕時會呈現函式 forceLoad()。forceLoad() 函式呈現一個 JavaScript 方法 - location.assign()，該方法導致視窗載入並顯示當前 URL 中指定的文件或頁面。導航發生後，它還允許使用者透過按瀏覽器的“後退”按鈕，藉助名為 Location.assign() 的屬性返回上一個頁面。
<html>
<body>
<h2>Window.location.assign() method</h2>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
location.assign("https://tutorialspoint.tw");
}
</script>
</body>
</html>
window.location、window.location.replace 和 window.location.assign 之間的區別
| 依據 | window.location.href | window.location.assign | window.location.replace |
|---|---|---|---|
| 定義 | 它獲取當前 URL 並重定向到 URL 中指定的文件或頁面。 | 它載入並顯示 URL 中指定的文件或頁面。 | 它用 URL 中指定的頁面替換當前頁面。 |
| 瀏覽器歷史記錄 | 它不會將新載入的文件或頁面新增到瀏覽器歷史記錄中。 | 它將新載入的文件或頁面儲存在瀏覽器歷史記錄中。 | 它還將新載入的文件或頁面儲存在瀏覽器歷史記錄中。 |
| 後退 | 它允許使用者返回到上一個頁面/文件。 | 它還允許使用者返回到上一個頁面。 | 它不允許使用者返回到上一個頁面。 |
window.location.href 屬性、window.location.replace() 和 window.location.assign() 方法之間的主要區別在於它們如何處理瀏覽器的歷史記錄。如果我們談論 location.replace 方法，它將替換當前 URL 並且不允許使用者返回到上一個頁面。location.assign 方法將載入一個新文件並將其新增到瀏覽器的歷史記錄中，同時允許使用者返回到先前開啟的頁面。最後，window.location 方法與 location.assign 相同，因為它也將新文件新增到瀏覽器的歷史記錄中。
結論
總結本文，在 JavaScript 中強制將新頁面載入到另一個頁面是一項簡單的任務，可以使用多種 JavaScript 方法來完成，即 window.location.href 屬性、window.location.replace() 方法或 window.location.assign() 方法。所有這些方法都幫助開發人員能夠建立動態且互動式的網頁，從而有助於建立更好的使用者互動並增強使用者應用程式體驗。
6K+ 次檢視
