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://www.tutorialspoint.com";
}, 3000);

上面的例子将在3秒过后将用户重定向到给定的URLhttps://www.tutorialspoint.com

例子

在这个例子中，我们定义了一个按钮（Load），当点击它时，会显示一个函数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://www.tutorialspoint.com";
      }
   </script>
</body>
</html>

window.location.replace

另一种强行重定向到另一个页面的方法是使用window.location.replace属性。这种方法有助于将浏览器历史中的当前页面替换成另一个页面，但在这里，用户将无法返回到原来的页面。

语法

window.location.replace("new_url");

在这个语法中，我们将获得与window.location.href例子相同的效果，但这里的区别是，用户的当前页面将不会被保存在浏览器的历史记录中。

例子

在这个例子中，我们定义了一个按钮（Load），当点击这个按钮时，会显示一个函数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://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

window.location.assign

在这个方法中，我们使用window.location.assign方法，该方法用于在浏览器的历史记录中添加一个新的页面，允许用户返回到用户浏览的原始页面。

语法

window.location.assign("new_url");

在这个语法中，它的效果与window.location的例子相同，但这里的区别是，用户的当前页面将被保存在浏览器的历史记录中。

例子

在这个例子中，我们定义了一个按钮（Load），当点击它时，会显示一个函数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://www.tutorialspoint.com");
      }
   </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()方法来完成。所有这些方法都能帮助开发者创建动态和互动的网页，帮助创造更好的用户互动，增强用户的应用体验。