JavaScript五花八门的跳转方式

我们最常见的跳转方式是location.href = "http://www.baidu.com"，这种是最常见的，但是常常使用location.replace，location.assign,，window.open，history.replaceState，location.reload等，这些跳转或者说与跳转相关的代码有什么作用？用在什么场合，会有那些坑吗？本文就围着跳转相关的JavaScript api和html技术来了解一下浏览器跳转。

1.location.href

最常见的一种跳转，location.href是一个可读写的属性，直接给它赋值就可以实现跳转。此外window.location.href和document.location.href都可以对当前窗口进行重定向。

location提供当前窗口文档相关信息，还提供导航功能，一般情况下location对象是window对象的属性也是document对象的属性，当服务器未发生重定向时，window.location和document.location等效，但是当服务器发生了重定向，就不一样了，如下：

document.location包含的是已经装载的URL
window.location.href包含的则是原始请求的文档的URL

2.window.top，window.parent，window.self

当页面有frameset或者iframe页面，并且有嵌套的情况，parent是父窗口，top是最顶层父窗口，self是当前窗口。

window.self是当前窗口自身的引用，它和window对象是等价的。window，self，window.self属性是等价的。

window.top返回顶层窗口，即浏览器窗口，如果窗口本身就是浏览器窗口，top属性返回的是对自身的引用。

window.parent返回父窗口，如果窗口本身是顶层窗口，parent属性返回对自身的引用。

他们都有location属性，并且可以跳转。

3.window.location.href

最常见的一种跳转方式

3.location.replace

location.replace(url)方法用给定的url参数替换当前的页面资源，调用后当前页面不会保存到会话历史中，例如history，session，调用location.replace之后用户点击回退按钮时将不会再跳转到当前页面。

4.location.assign

location.assign会添加记录到浏览历史，点击后退可以返回之前页面。触发窗口加载并显示指定的url内容，和location.href不同的是如果location.assign(url)的参数和页面当前url属于不同的域的时候，会抛出一个安全错误AECURITY_ERROR。

4.history

从浏览器打开一个页面开始，history对象保存用户的上网记录。由于安全原因，浏览器不会暴露用户浏览过的url地址，但是借助history，可以在不知道实际url的情况下实现页面前进和后退。

history.go

使用history.go方法可以在用户的历史记录中任意跳转。方法接收一个整数值参数，标识向前或向后跳转的页面的个数。负数标识向后跳转，类似后退按钮，正数表示向前跳转，类似前进按钮，0或者不传参数可以刷新当前页面。

history.back

back方法用于模拟浏览器后退按钮，相当于history.go(-1)

history.forward

forward方法用于模拟浏览器的前进按钮，相当于history.go(1)

注意：使用以上三个方法时如果移动的位置超出history边界，并不报错，而是静默失败。使用历史记录时，页面从浏览器缓存中加载，不是要求服务器重重新发送新的网页。

history.pushState

HTML5为history对象添加了两个新的方法，history.pushState，history.replaceState，用来在浏览器中添加和修改history记录，而window.onpopstate用来监听history对象的变化。

pushState方法用来向浏览器历史中添加一个记录，它有三个参数：一个对象，一个标题，一个可选的URL地址：

history.pushState(state, title, url)

state：状态对象是一个由pushState方法创建的，与历史记录相关的JavaScript对象。当用户导航到新状态时，会触发popstate事件，并且该事件的状态属性包含历史记录条目的对象的副本。状态对象可以是任何可以序列化的对象。

firefox会把状态对象保存到用户的磁盘上，这样用户重启浏览器之后可以将其还原，所以这个对象的序列化结果又2MB的大小限制。
title：大多数的浏览器都忽略这个参数，传递空字符串可以防止将来对方法的更改。
url：新的URL。注意在调用pushState之后浏览器不会尝试加载此URL，但是可能会在用户重启浏览器后重新加载这个URL。新的URL不必是绝对地址，如果是相对的，则相对于当前的URL进行解析。新的URL需要和当前的URL的origin相同，否则会抛出异常。如果未指定此参数，则将其设置为当前的URL。

pushState有一个很常见的用法是在后台管理项目中，如果经常会有tab页展示的情况，例如：每次点击左侧的菜单栏新增一个tag，同时使用pushState添加一条状态，这样点击浏览器后退的时候就会从当前tab页回退到上一个tab页。

history.replaceState

把当前页面的历史记录替换掉，它最大的特点是添加或者替换历史记录之后，浏览器会变成你指定的地址，而页面并不会重新载入或跳转。

例如，假设当前页面地址是foo.com/1.html, 且history中只有一条当前页面的记录。当执行history.pushState(null, null, '2.html')后，浏览器的地址将会变成foo.com/2.html, 但是并不会跳转2.html，甚至不会去检查2.html是否存在，只是加入一个最新的历史记录。此时history中会有2条记录。假如点击页面上的一个超链接跳转到另外一个页面后，点击后退按钮，url会变成foo.com/2.html, 如果此前在浏览器缓存中有1.html的话，会显示1.html的内容，否则会向服务器发起foo.com/2.html 的请求。如果再次点后退，url会变成foo.com/1.html

而如果执行history.replaceState('foo.com/2.html')的话，浏览器地址也会显示foo.com/2.html, 区别是history中只有当前2.html的记录，而1.html的记录已经被替换掉。

6.window.navigate

window.navigate("http://www.baidu.com/") 这个方法是只针对IE的，不适用于火狐等其他浏览器，在HTML DOM Window Object中，根本没有列出window.navigate这个方法，所以这个方法尽量少用。

9.html超链接

这也是一种很常见的跳转方式，用法如下：

简单的链接：

<a href="http://www.baidu.com" title="百度">百度</a>

外部链接，点击时，会新开一个tab页

<a href="http://www.baidu.com" title="百度" target="_blank">百度</a>

除此之外，还可以使用超链接实现其他的功能，例如下载，打开电话拨号，打开email等。

下载图片：

<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download>下载</a>

打开电话

<a href="tel:+86177******">打电话给张三</a>

发送email

<a href="mailto:zhangsan@qq.com" cc="李四@gmail.com">发邮件给张三并抄送给李四</a>

10.meta标签

html文档的头部meta标签中有个属性http-equiv="Refresh"，有两种用途：一是网页定时刷新，而是自动跳转到指定页面，不需要调用js，也不需要点击超链接。

自动刷新实用性不强，一般会使用setInterval或者websocket技术实现。

自动跳转在一些网站中很常见，例如进入网站先显示一个欢迎页面，3秒后跳转到另外一个页面，如下代码：

<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

使用meta标签3秒后跳转到百度。