我们最常见的跳转方式是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秒后跳转到百度。