• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > js中document.referrer实现移动端返回上一页

js中document.referrer实现移动端返回上一页

作者:礼拜16 字体:[增加 减小] 来源:互联网 时间:2017-05-11

礼拜16通过本文主要向大家介绍了js document.referrer,document.referrer,js referrer,referrer,referrer是什么意思等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层。这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题。

但是在移动端,如果想要返回上一页。比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 <  按钮,给它加 history.go(-1) ,返回上一层。

<a href="javascript:history.go(-1)" rel="external nofollow" class="header-back jsBack">返回</a>

那如果我们没有返回上一页的 < 的按钮,在手机上怎么操作才会返回上一页,比如:从微信分享进来的,进入的是微信内页,此时,内页就是第一页,它没有上一页,要怎么返回?这时点返回按钮是没有反应的,不是一个好的用户体验,十有八九的人会误以为是BUG,这绝对是个坑爸的问题。

移动端无论是原生app还是传统的网页,返回上页是一个比较强烈的需求。

javascript 有一个可以获取前一页面的URL地址的方法:document.referrer

document.referrer 的来源

  1. referrer 属性可返回载入当前文档的文档的 URL【摘自W3CSHCOOL】, 如果当前文档不是通过超链接访问的,那么当前文档的URL为NULL,这个属性允许客户端的 javascript 访问 HTTP 头部;
  2. 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.weikejianghu.com'; 
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; 
}
</div>

document.referrer 的牛X做法

解决移动端返回上一页的问题,就是上面所说的微信分享的问题?根据【张鑫旭】大神的方法是,既然点击上一页没有反应,就让它返回首页,从首页再进入其它子页面,应该没啥问题。

1.根据 document.referrer 的来源来判断是否有来源信息,如果没有,则返回首页:

if (typeof document.referrer === '') {
 // 没有来源页面信息的时候,改成首页URL地址
 $('.jsBack').attr('href', '/');
}
</div>

这样,当再次点击返回按钮时,就可以返回首页了。

2.根据 document.referrer 的来源url 是否为网站的 url,如果判断这个 url 的来路有问题,则屏蔽该 url 下的所有信息,比如不让其显示图片等。可以有效的防止盗链,目前百度统计,google ads统计,CNZZ统计,都是用的这个方法。

无法获取 referrer 信息的情况

下面的场景无法获得 referrer 信息,以下前8条属于【张鑫旭】:

  1. 直接在浏览器中输入地址
  2. 使用location.reload()刷新(location.href或者location.replace()刷新有信息)
  3. 在微信对话框中,点击进入微信自身浏览器
  4. 扫码进入微信或QQ的浏览器
  5. 直接新窗口打开一个页面
  6. 从https的网站直接进入一个http协议的网站(Chrome下亲测)
  7. a标签设置rel="noreferrer"(兼容IE7+)
  8. meta标签来控制不让浏览器发送referer
  9. 点击 flash 内部链接
  10. Chrome4.0以下,IE 5.5+以下返回空的字符串
  11. 使用 修改 Location 进行页面导航的方法,会导致在IE下丢失 referrer,这可能是IE的一个BUG
  12. 跨域

<meta content="never" name="referrer">

怎么解决无法获取 referrer 的情况,还没有很好的方法,尽量避免吧。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • js中document.referrer实现移动端返回上一页
  • Javascript中document.referrer隐藏来源的方法

相关文章

  • 2017-05-11JS中input表单隐藏域及其使用方法
  • 2017-05-11js中Number数字数值运算后值不对的解决方法
  • 2017-05-11canvas绘制万花筒效果(代码分享)
  • 2017-05-11详解Vue中使用v-for语句抛出错误的解决方案
  • 2017-05-11nodejs个人博客开发第五步 分配数据
  • 2017-05-11jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
  • 2017-05-11AngularJS实现路由实例
  • 2017-05-11详解nodejs微信公众号开发——3.封装消息响应模块
  • 2017-08-26JavaScript继承
  • 2017-05-11正则表达式基本语法及表单验证操作详解【基于JS】

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js中编码函数:escape,encodeURI与encodeURIComponent详解
    • 详解微信小程序开发之——wx.showToast(OBJECT)的使用
    • jQuery Validate 相关参数及常用的自定义验证规则
    • 详解JS: reduce方法实现 webpack多文件入口
    • js记录点击某个按钮的次数-刷新次数为初始状态的实例
    • jQuery实现文章图片弹出放大效果
    • JS倒计时demo
    • jQuery移除或禁用html元素点击事件常用方法小结
    • JS简单获取日期相差天数的方法
    • 原生js实现淘宝购物车功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有