javascript:location=document.referrer;和javascript:history.go(-1);区别:
返回上一页,在PC端我们可以使用:history.go(-1)
或者history.back(),可以正常返回第一层。这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题。
但是在移动端,如果想要返回上一页。比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 < 按钮,给它加 history.go(-1) ,返回上一层。
<a href="javascript:history.go(-1)" class="header-back jsBack">返回</a>
那如果我们没有返回上一页的 < 的按钮,在手机上怎么操作才会返回上一页,比如:从微信分享进来的,进入的是微信内页,此时,内页就是第一页,它没有上一页,要怎么返回?这时点返回按钮是没有反应的,不是一个好的用户体验,十有八九的人会误以为是BUG,这绝对是个坑爸的问题。
移动端无论是原生app还是传统的网页,返回上页是一个比较强烈的需求。
javascript 有一个可以获取前一页面的URL地址的方法:document.referrer
document.referrer 的来源
- referrer 属性可返回载入当前文档的文档的 URL【摘自W3CSHCOOL】, 如果当前文档不是通过超链接访问的,那么当前文档的URL为NULL,这个属性允许客户端的 javascript 访问 HTTP 头部;
- referrer 属性,我们可以从 http 头部获取
无法获取 referrer 信息的情况
下面的场景无法获得 referrer 信息,以下前8条属于:
- 直接在浏览器中输入地址
- 使用
location.reload()
刷新(location.href
或者location.replace()
刷新有信息) - 在微信对话框中,点击进入微信自身浏览器
- 扫码进入微信或QQ的浏览器
- 直接新窗口打开一个页面
- 从https的网站直接进入一个http协议的网站(Chrome下亲测)
a
标签设置rel="noreferrer"
(兼容IE7+)meta
标签来控制不让浏览器发送referer
- 点击 flash 内部链接
- Chrome4.0以下,IE 5.5+以下返回空的字符串
- 使用 修改 Location 进行页面导航的方法,会导致在IE下丢失 referrer,这可能是IE的一个BUG
- 跨域
<meta content="never" name="referrer">
怎么解决无法获取 referrer 的情况,还没有很好的方法,尽量避免吧。