绵阳梓潼网站制作公司

js中document.referrer如何实现移动端返回上一页-创新互联

这篇文章主要介绍js中document.referrer如何实现移动端返回上一页，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的10年时间我们累计服务了上千家以及全国政企客户，如成都木屋等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞赏。

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

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

返回

那如果我们没有返回上一页的 < 的按钮，在手机上怎么操作才会返回上一页，比如：从微信分享进来的，进入的是微信内页，此时，内页就是第一页，它没有上一页，要怎么返回？这时点返回按钮是没有反应的，不是一个好的用户体验，十有八九的人会误以为是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 = 'https://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做法

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

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

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

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

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

无法获取 referrer 信息的情况

下面的场景无法获得 referrer 信息：

  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. 跨域

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

以上是“js中document.referrer如何实现移动端返回上一页”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网站栏目：js中document.referrer如何实现移动端返回上一页-创新互联
当前URL：http://myzitong.com/article/dgejed.html

其他资讯