JavaScript提供了许多方法来将用户重定向到不同的网页。学习最常用的方法,也了解一下所有其他选项,使用纯JavaScript。

如果在程序执行期间需要转到另一个页面,JavaScript提供了许多方法来将用户重定向到不同的网页。

其中被认为是规范的导航到新URL的方法是:

window.location = 'https://newurl.com'

如果要重定向到同一域中的不同路径,请使用:

window.location.pathname = '/new'

这是使用History API提供的location对象来实现的。

其他重定向选项

程序设计的大多数情况下,同一个操作可以有多种方法来执行。

因为浏览器中的window是隐式的,所以你也可以这样做:

location = 'https://newurl.com'

另一种方法是设置locationhref属性:

window.location.href = 'https://newurl.com'

location对象还有一个assign()方法,它接受一个URL,并执行相同的操作:

window.location.assign('https://newurl.com')

replace()方法与前面的方法不同,因为它重写了历史记录中的当前页面。当前页面被抹掉,所以当你点击“返回”按钮时,你会回到现在成为最后访问页面的页面。

window.location.replace('https://newurl.com')

在某些情况下,这可能很方便。

访问window对象的不同方式

浏览器暴露了selftop对象,它们都引用window对象,所以你可以在上述所有示例中使用它们来代替window

self.location = 'https://newurl.com'
top.location = 'https://newurl.com'

使用服务器端指令进行301重定向

前面的示例都考虑了程序决定跳转到另一页的情况。

如果需要重定向是因为当前URL已经过时并且需要进一步跳转到新的URL,最好使用服务器级的指令,并设置301 HTTP代码以通知搜索引擎当前URL已经永久移动到新资源。

如果使用Apache,可以通过.htaccess来实现这一点。Netlify通过一个_redirects文件来完成这个任务。

是否可以使用JavaScript进行301重定向?

不幸的是,不可以。

这是无法在客户端上完成的。

301 HTTP响应代码必须在JavaScript被浏览器执行之前从服务器发送。

实验证明,搜索引擎将JavaScript重定向解释为301重定向。参见这篇Search Engine Land的文章

Google表示

使用JavaScript重定向用户可以是一种合理的做法。例如,如果用户登录后将其重定向到内部页面,可以使用JavaScript来实现。在检查JavaScript或其他重定向方法以确保您的网站符合我们的指南时,请考虑意图。请记住,当移动您的网站时,301重定向是最佳选择,但如果您无法访问网站的服务器,则可以使用JavaScript重定向来实现该目的。

使用HTML元标签

另一种选择是在HTML中使用元标签:

<html>
 <head>
 <meta http-equiv="refresh" content="0;URL=https://newurl.com/">
 </head>
</html>

这将导致浏览器在加载并解析当前页面后加载新页面,并且不会向搜索引擎发送任何信号。始终使用301服务器级别重定向是最佳选择。