转:javascript获取上一访问页面
原文链接:移动端返回上一页,刚需!document.referrer 详解
全文如下:
返回上一页,在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 头部获取
document.referrer 的兼容性
document.referrer IE7都支持,它的兼容性比较高,Android 5.0开始支持,iOS都支持,PC端浏览器从IE7就开始支持了,兼容性没有什么大的问题。
但是有个小小的问题,就是 IE 会主动清除 referref 属性。在IE中用javascript做跳转,比如用window.location.href = “”; google如果使用document.referrer无法取到浏览器请求的HTTP referrer,因为IE清空了。而其他主流浏览器Firefox和Chrome都会保留referrer,没办法,只好判断,如果是IE浏览器,就主动给它增加一个 referrer 。这样的原理就是给IE浏览器的页面偷偷加了个链接,然后自动点这个链接,于是referrer就能保留了。

var url = 'http://www.jb51.net';
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent))
{
var referLink = document.createElement('a');
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else
{
location.href = url;
}

document.referrer 的牛X做法
解决移动端返回上一页的问题,就是上面所说的微信分享的问题?根据【张鑫旭】大神的方法是,既然点击上一页没有反应,就让它返回首页,从首页再进入其它子页面,应该没啥问题。
- 根据 document.referrer 的来源来判断是否有来源信息,如果没有,则返回首页:
if (typeof document.referrer === '') {
// 没有来源页面信息的时候,改成首页URL地址
$('.jsBack').attr('href', '/');
}
这样,当再次点击返回按钮时,就可以返回首页了。
- 根据 document.referrer 的来源url 是否为网站的 url,如果判断这个 url 的来路有问题,则屏蔽该 url 下的所有信息,比如不让其显示图片等。可以有效的防止盗链,目前百度统计,google ads统计,CNZZ统计,都是用的这个方法。
无法获取 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 的情况,还没有很好的方法,尽量避免吧。
-------------------------------------------------------------------------------原文结束,我是一条看似普通,极具内涵的分割线---------------------------------------------------------------------
主要说一点,文中提到w3c的定义,“referrer 属性可返回载入当前文档的文档的 URL, 如果当前文档不是通过超链接访问的,那么当前文档的URL为NULL,这个属性允许客户端的 javascript 访问 HTTP 头部”,可能读起来挺绕的,其实意思就是,referrer可返回一个url,这个url是前一个页面的url。但是有限制,当前页面必须是经过前一个页面“载入”的,比如<a>标签跳转,js跳转。服务器端的跳转是不行的。
转:javascript获取上一访问页面的更多相关文章
- javascript获取当前用户访问的宽带IP地址
javascript获取当前用户访问的宽带IP地址 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></sc ...
- js获取浏览器上一访问页面URL地址,document.referrer方法
如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- javascript 获取上一周的时间
<script type="text/javascript" language="javascript"> //获取系统时间 var LSTR_nd ...
- PHP 登录完成后如何跳转上一访问页面
访问网站页面时,有的页面需要授权才能访问,这时候就会要求用户登录,跳转到登录页面login.php,怎么实现登录后返回到刚才访问的页面 项目需求 访问网站页面时,有的页面需要授权才能访问,这时候就会要 ...
- javascript获取元素结点到页面的绝对距离的方式
var div = document.getElementById('div');var p = getPos(div); function getPos(obj) { var pos = {left ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- yii2获取登录前的页面url地址--电脑和微信浏览器上的实现以及yii2相关源码的学习
对于一个有登录限制(权限限制)的网站,用户输入身份验证信息以后,验证成功后跳转到登录前的页面是一项很人性化的功能.那么获取登录前的页面地址就很关键,今天在做一个yii2项目的登录调试时发现了一些很有意 ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
随机推荐
- 【OpenCV3】threshold()函数详解
threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...
- 抓取出现时间3s后消失的元素
背景:日常自动化脚本编写中,可能需要定位,获取元素的位置,通常会遇到一种元素,只出现几秒,几秒后慢慢消失的,这个时候,如果要抓取这个提示,如果和它比手速,当你手速比较快,可以箭头抓取到,但当这个元素的 ...
- (转)mysql5.7 根据二进制文件mysqlbinlog恢复数据库 Linux
原文:http://blog.csdn.net/qq_15058425/article/details/61196085 1.开始mysqlbinlog日志功能 先找打my.cnf文件的位置: 2.编 ...
- Go 单元测试、基准测试、并发基准测试
一.单元测试 要开始一个单元测试,需要准备一个 go 源码文件,在命名文件时需要让文件必须以_test结尾. 单元测试源码文件可以由多个测试用例组成,每个测试用例函数需要以Test为前缀,例如: fu ...
- springboot-7-配置druid数据源监视
关于druid数据源的配置, 上个博客已经说过了,再说一遍吧 , 引入依赖 , 配置properties参数 , 编写servlet和filter提供页面监视 , 测试 1, 引入maven依赖 &l ...
- [笔记] Fiddler 抓包工具的使用
目录 Filler 的特点 Fidder工具的下载安装 Fidder 证书安装 Fiddler工作原理 Fidder 常见的命令和按钮 Fiddler 各种疑难杂症 Fillder 的特点 Fidde ...
- 【.Net】鼠标点击控制鼠标活动范围 ClipCursor
可以使用API ClipCursor,如果你不嫌麻烦的话. 以下方法: Private Sub Form1_MouseDown(sender As System.Object, e As System ...
- 彻底解决springMVC中文乱码
一.页面编码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> & ...
- vue router的浏览器跳转行为
最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...
- Linux下svn服务器搭建
初次在linux上搭建svn服务器,本来以为很繁琐,其实很简单,主要分为以下几个步骤: 1. 首先安装subversion,命令:yum install subversion 2. 创建svn仓库 ...