如何使用JavaScript强制加载另一个页面

在JavaScript中，我们可以使用window.location对象来强制加载另一个页面。我们可以使用该对象来设置新页面的URL。有不同的方法-窗口.location.href属性，window.location.assign()和window.location.replace()方法，可以使用该对象设置新页面的URL。我们将在本教程中详细讨论每个属性和方法。

window.location.replace

第一种方法是使用 window.location.href 属性。此属性包含有关页面当前URL的信息，并可用于将用户重定向到新页面。

语法

window.location.href = "new_url";

用户将立即被重定向到指定的URL（new_url）。

为了在经过指定的一段时间后将用户重定向，我们还可以使用setTimeout函数，该函数允许用户在函数中指定的时间后重定向到源URL。

setTimeout(function() {
   window.location.href = "https://www.tutorialspoint.com";
}, 3000);

上面的示例会在3秒后将用户重定向到给定的URL（https://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
定义	获取当前网址，并重定向到指定的新文档或页面。	加载和显示指定网址的文档或页面。	用指定的网址替换当前页面。
浏览器历史	不将新加载的文档或页面添加到浏览器历史记录。	将新加载的文档或页面保存在浏览器历史记录中。	也将新加载的文档或页面保存在浏览器历史记录中。
返回	允许用户返回到上一页/上一个文档。	也允许用户返回到上一页。	不允许用户返回到上一页。

window.location.href属性、window.location.replace()方法和window.location.assign()方法之间的主要区别在于它们如何处理浏览器的历史记录。如果我们谈论location.replace方法，它将替换当前的URL，并且不允许用户返回上一页。location.assign方法将加载一个新文档，并将其同时添加到浏览器的历史记录中，同时允许用户返回到先前打开的页面。最后，window.location方法与location.assign相同，因为它还将新文档添加到浏览器的历史记录中。

结论

总结文章，使用多个JavaScript方法，即window.location.href属性、window.location.replace()方法或window.location.assign()方法，可以轻松地将新页面强行加载到另一个页面中。所有这些方法都帮助开发人员创建动态和交互式的网页，提高用户交互性，增强用户应用体验。