首页 > javascript培训班 > document.referrer-js获取访问来源路径

document.referrer-js获取访问来源路径

发布-网页培训班 | 浏览量-

 一、JS获取前一个访问页面的URL地址document.referrer

要获取前一个访问页面的URL地址前后端语言都可以,例如PHP的是$_SERVER['HTTP_REFERER'],JavaScript的就是document.referrer。
我们平常开发,虽然和URL打交道也算比较频繁,但是,似乎很少使用document.referrer。我起初以为是兼容性不好,后来测试发现ie7都支持,那就奇怪了,为何document.referrer用的不多呢?
 
我想了一下,可能有下面几个原因:
1、后端小伙伴帮我们搞定了相关需求;
2、只有一些访问数据统计脚本才非常在意上一个访问页面的url地址是什么;
3、如果实现的功能是返回上一页,可以使用history.go(-1)或者history.back(),并不需要知道上一个访问页面具体的地址是什么。
综合以上几点,导致平时开发很少使用document.referrer。
 
但是最近做了一个移动端项目,是我第一次在正式项目中使用document.referrer,这里跟大家分享一下相关的实践。
场景是这样的:移动端无论是原生app还是传统的网页,
 
几乎所有的内页都有这么一个返回上一页的按钮,相关HTML代码如下:
<a href="javascript:history.go(-1)" class="Back">返回</a>
在大部分场景下,上面办法可以满足我们的交互需求,但是,在有些时候,上面的代码就有些心有力而气不足,因为当前页面的referrer并不总是存在的。
比方说用户是通过微信分享进来的,直接进入了内页,此时是没有上一页的,返回按钮再怎么点击都没有任何反应,就会让用户很奇怪,十有八九会认为是bug,会让用户对产品的品质抱有疑虑,那问题可就大了。
 
怎么办呢!后来我想了一招,如果发现浏览器没有上一页来源信息,我们就把返回按钮的链接改成首页的链接地址,这样无论什么时候,用户点击返回按钮一定是会有反应的,并且返回首页从逻辑上讲也是合情合理的。而这里判断是否有没有来源信息就是使用这里的document.referrer,当浏览器得不到上一页的来源信息的时候,document.referrer的返回值就是空字符串'',于是乎,就有类似下面的代码:
 
if (document.referrer === '') {
    // 没有来源页面信息的时候,改成首页URL地址
    $('.jsBack').attr('href', '/');
}
这样返回按钮的逻辑就天衣无缝了。
 
二:哪些场景下无法获得上一页referrer信息
1、直接在浏览器地址栏中输入地址;
2、使用location.reload()刷新(location.href或者location.replace()刷新有信息);
3、在微信对话框中,点击链接进入微信自身的浏览器;
4、扫码进入QQ或者微信的浏览器;
5、直接新窗口打开一个页面; 2017.8.3更新 新版本Chrome测试,新窗口页面依然有document.referrer
6、从https的网站直接进入一个http协议的网站(Chrome下亲测);
7、a标签设置rel="noreferrer"(兼容IE7+);
8、meta标签来控制不让浏览器发送referer;
例如:
<meta content="never" name="referrer">
 
等等。
 

html5 history 阻止浏览器后退

javascript刷新页面代码

原文地址:http://www.35ui.cn/post/20180408888.html

标签Documentreferrerhistory

上一条: JS中的location属性和方法总结
下一条: zblog标签|zblog模板调用标签说明

或许你还对下面的文章感兴趣