document.referrer和history.go(-1)退回上一页区别
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 的情况,还没有很好的方法,尽量避免吧。
document.referrer和history.go(-1)退回上一页区别的更多相关文章
- 微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题
问题描述: 在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history.go(-1)方法,这样做本身没有任何问题,但是在微信中,安卓手机还好返回上一页页面会 ...
- 解决使用window.history.back(),返回上一页后,页面不刷新问题
window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }
- js中的referrer返回上一页使用介绍
js中的referrer的用法举例. js完整代码: <script language="javascript"> var refer=document.refer ...
- js中的referrer使用,返回上一页
js完整代码: <script language="javascript"> var refer=document. referrer ; document.g ...
- html实现返回上一页的几种方法(javaScript:history.go(-1);)
html实现返回上一页的几种方法(javaScript:history.go(-1);) 一.总结: 1.javaScript:history.go(-1); 二.方法 1.通过超链接返回到上一页 & ...
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
- js返回上一页并刷新的多种实现方法
<a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:loca ...
- js返回上一页并刷新的多种方法
js返回上一页并刷新的几种方法.参考链接:http://www.jbxue.com/article/11230.html <a href="javascript:history.go( ...
- Web---JS-返回上一页并刷新代码整理
返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项,长话短说,今天介绍实现此功能的一个方法,需要了解的朋友可以参考下: 一:JS 重载页面,本地刷新,返回上一页 代码如下: ...
随机推荐
- Spring思维导图(AOP篇)
什么是aop AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP允许 ...
- transition与animation的区别
transition需要事件触发,animation可以直接自动触发,而且功能上更为强大,包括可以设置不同时间段的动画规则,还有状态的控制,事件等等.
- EXCEL 导入 R 的几种方法 R—readr和readxl包
导入Excel数据至R语言的几种方法 如有如下Excel数据源,如何将数据导入R语言呢?今天主要来介绍几种常见的方法: 一.使用剪贴板,然后使用read.table函数: 首先选择Excel中的数据源 ...
- SIP简介
说明:以下内容来着之前下载的一份文档,现将概念部分摘录在BLog,如需要完整文档将放在文件中或留言. SIP简介,第1部分:SIP初探 时间:2006-04-07作者:Emmanuel Proulx浏 ...
- Xshell 连接Linux虚拟机失败解决办法
当我们在VMWare上安装好Ubuntu虚拟机后,有时候会需要使用多个terminal窗口,但是在虚拟机中多个窗口互相切换查看不方便,这时候用物理机的xshell工具连接到虚拟机中去就显得很方便.直接 ...
- APUE(3)---文件I/O (3)
十二.函数sync.fsync和fdatasync 延迟写:传统的Unix系统在内核中设有缓冲区或页高速缓冲,大多数磁盘I/O都通过缓冲区进行,当我们向文件写入数据时,内核通常先将数据复制到缓冲区,然 ...
- ibatis 参数之 String
<select id="query_cust_name" resultClass="_custForm" parameterClass="Str ...
- C# 二维码生成——QRCode
C#二维码生成,这里使用开源的ThoughtWorks.QRCode.dll库. 步骤: 1.下载ThoughtWorks.QRCode.dll库文件,并引用到项目中. 2.创建QRCodeHandl ...
- ES6——介绍
什么是ES6? ECMAScript 6.0 (简称ES6)是继ECMAScript 5.1 之后 JavaScript 语言的下一代标准,发布在2015年6月.他的目标,是使得 JavaScript ...
- 高性能无锁队列 Disruptor 初体验
原文地址: haifeiWu和他朋友们的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 最近一直在研究队列的一些问题,今天楼主要分享一个高性能的队列 Disr ...