JavaScript提供了许多方法来将用户重定向到不同的网页。学习最常用的方法,也了解一下所有其他选项,使用纯JavaScript。
如果在程序执行期间需要转到另一个页面,JavaScript提供了许多方法来将用户重定向到不同的网页。
其中被认为是规范的导航到新URL的方法是:
window.location = 'https://newurl.com'
如果要重定向到同一域中的不同路径,请使用:
window.location.pathname = '/new'
这是使用History API提供的location
对象来实现的。
其他重定向选项
程序设计的大多数情况下,同一个操作可以有多种方法来执行。
因为浏览器中的window
是隐式的,所以你也可以这样做:
location = 'https://newurl.com'
另一种方法是设置location
的href
属性:
window.location.href = 'https://newurl.com'
location
对象还有一个assign()
方法,它接受一个URL,并执行相同的操作:
window.location.assign('https://newurl.com')
replace()
方法与前面的方法不同,因为它重写了历史记录中的当前页面。当前页面被抹掉,所以当你点击“返回”按钮时,你会回到现在成为最后访问页面的页面。
window.location.replace('https://newurl.com')
在某些情况下,这可能很方便。
访问window
对象的不同方式
浏览器暴露了self
和top
对象,它们都引用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的文章。
使用JavaScript重定向用户可以是一种合理的做法。例如,如果用户登录后将其重定向到内部页面,可以使用JavaScript来实现。在检查JavaScript或其他重定向方法以确保您的网站符合我们的指南时,请考虑意图。请记住,当移动您的网站时,301重定向是最佳选择,但如果您无法访问网站的服务器,则可以使用JavaScript重定向来实现该目的。
使用HTML元标签
另一种选择是在HTML中使用元标签:
<html>
<head>
<meta http-equiv="refresh" content="0;URL=https://newurl.com/">
</head>
</html>
这将导致浏览器在加载并解析当前页面后加载新页面,并且不会向搜索引擎发送任何信号。始终使用301服务器级别重定向是最佳选择。