本文详解如何利用document.referrer属性解决移动端无返回按钮时的上一页跳转问题。针对微信分享等场景，通过判断来源URL实现智能返回首页或屏蔽盗链。同时深入分析IE清除referrer的兼容性问题及多种无法获取referrer信息的场景，提供实用的前端解决方案。
移动端返回上一页的需求与挑战
在PC端实现返回上一页功能，通常可以直接调用 history.go(-1) 或 history.back() 方法，这能正常返回至第一层页面。这种方式的优势在于无需知晓上一页的具体URL，只要依赖 history 对象即可顺利实现跳转。
然而，在移动端开发中，若需从页面B返回页面A，且页面B未提供明确的返回按钮，直接调用 history.go(-1) 可能导致跳转错误或无响应。因此，必须设计一个返回按钮并绑定相应的事件处理，以确保用户能正确返回上一层。
<a href="javascript:history.go(-1)" rel="external nofollow" class="header-back jsBack">返回</a>
若移动端页面缺乏返回按钮，例如用户通过微信分享链接进入内页，此时该内页即为第一页，不存在“上一页”。在这种情况下，点击返回按钮往往无任何反应，严重影响用户体验，用户极易将此误认为是系统BUG，这是一个常见的开发陷阱。
无论是原生App还是传统网页，移动端“返回上一页”都是一个高频且强烈的用户交互需求。
document.referrer 属性详解
JavaScript 提供了一个名为 document.referrer 的属性，用于获取前一页面的URL地址。
了解 document.referrer 的来源机制有助于更好地理解其工作原理。
- 根据W3CSHCOOL的说明，referrer 属性返回载入当前文档的文档URL。若当前文档并非通过超链接访问，该属性值为NULL。此属性允许客户端JavaScript直接访问HTTP头部信息。
- 我们可以通过HTTP头部获取 referrer 属性的值，从而判断页面的来源。
关于 document.referrer 的兼容性表现。
该属性在IE7及以上版本中均得到支持，兼容性较好。具体而言，Android 5.0及以上系统支持，iOS所有版本均支持，PC端浏览器从IE7开始即支持。总体而言，兼容性方面不存在重大障碍。
IE浏览器兼容性问题处理
尽管兼容性良好，但存在一个特殊情况：IE浏览器会主动清除 referrer 属性。当使用JavaScript进行页面跳转（如 window.location.href = “”）时，若通过 document.referrer 获取值，在IE中可能无法获取到HTTP referrer，因为IE已将其清空。相比之下，Firefox和Chrome等主流浏览器会保留该信息。为解决此问题，需进行判断：若检测到为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 的高级应用技巧。
基于referrer的智能返回策略
解决移动端返回上一页问题，特别是微信分享场景下的返回难题，可参考张鑫旭大神的方案：既然直接点击返回无反应，可将其逻辑改为返回首页，再从首页导航至其他子页面，这样通常能避免跳转错误。
具体实现逻辑之一：根据 document.referrer 是否存在来源信息来判断。若没有来源信息，则直接将返回按钮指向首页。
if (typeof document.referrer === '') {
// 没有来源页面信息的时候，改成首页URL地址
$('.jsBack').attr('href', '/');
}通过上述处理，当用户再次点击返回按钮时，即可顺利返回首页。
具体实现逻辑之二：判断 document.referrer 的URL是否属于本网站域名。若检测到来路异常，可屏蔽该URL下的部分信息（如不显示图片），从而有效防止盗链。目前，百度统计、Google Ads统计及CNZZ统计均采用了类似机制。
无法获取referrer信息的场景
在某些特定场景下，无法获取 referrer 信息。
以下场景均无法获得 referrer 信息，其中前8条由张鑫旭总结：
- 直接在浏览器地址栏中输入网址并访问。
- 使用 location.reload() 刷新页面（注：使用 location.href 或 location.replace() 刷新时仍包含信息）。
- 在微信对话框中，点击进入微信内置浏览器。
- 通过扫码进入微信或QQ内置浏览器。
- 直接在新窗口中打开一个页面。
- 从HTTPS网站直接跳转到HTTP协议网站（在Chrome浏览器下实测证实）。
- a标签设置 rel="noreferrer" 属性（该设置兼容IE7及以上版本）。
- 通过 meta 标签控制浏览器不发送 referrer（例如设置 <meta content="never" name="referrer">）。
- 点击Flash内部链接。
- Chrome 4.0以下版本及IE 5.5以下版本返回空字符串。
- 使用修改 Location 进行页面导航的方法，会导致在IE下丢失 referrer，这可能被视为IE的一个BUG。
- 跨域请求场景。
<meta content="never" name="referrer">
目前尚无完美的方法解决无法获取 referrer 的情况，建议在实际开发中尽量避免触发上述场景。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！