解释ES6中的页面重定向

本教程将介绍页面重定向，在JavaScript的ES6版本中引入。页面重定向是一种将网页访问者从当前URL发送到另一个URL的方法。我们可以将用户重定向到同一网站的不同网页或另一个网站或服务器。

在JavaScript中，一个窗口是一个全局对象，它包含了位置对象。我们可以使用位置对象的不同方法来实现ES6中的页面重定向，这就是我们下面要学习的全部内容。

使用window.location对象的href属性值

窗口全局对象的位置对象包含href属性。location对象包含了关于你所处的当前网页位置的所有信息。位置对象的’href’属性包含了当前的URL。

为了将访问者重定向到不同的URL，我们需要改变网络浏览器中的当前URL，我们可以通过改变location对象的href属性的值来做到这一点。

语法

用户可以按照下面的语法，通过改变href属性的值，将访问者重定向到另一个页面。

window.location = "<new_URL>";
window.location.href = "<new_URL>";

在上述语法中，如果我们给window.location对象分配一个新的URL值，默认情况下会改变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.com/"
      }
   </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://www.tutorialspoint.com ");
      }
   </script>
</body>
</html>

使用location.replace()方法

location对象的replace()方法与assign()方法的作用相同。replace()方法和assign()方法的唯一区别是，replace()方法在历史堆栈中用一个新的URL替换当前URL。所以，它不允许历史堆栈包含前一个网页的信息，这意味着用户不能回去。

assign()方法在历史堆栈中添加一个新条目。因此，用户可以使用网页浏览器的返回按钮回到上一个页面。

语法

用户可以按照下面的语法，使用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://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

另外，用户可以使用窗口对象的navigate（）方法进行重定向。navigate()方法已被废弃，所以不建议用它来进行重定向。

我们学习了3到4种方法来重定向用户到不同的网页。用户可以根据自己的要求使用任何方法。例如，如果他们想替换当前的URL，使用replace()方法；否则，使用assign()方法。用户可以使用reload()方法来获取新的服务器数据。