document.referrer 经常为空字符串，是因为受浏览器referrer-policy策略及导航行为限制：如直接输入url、书签打开、https→http降级、window.open()无opener、meta或a标签设no-referrer、隐私模式等均导致其为空。
document.referrer 为什么经常是空字符串
它不是“失效”，而是受制于真实导航行为和浏览器安全策略。直接在地址栏输入 URL、通过书签打开、使用 location.href 跳转、window.open()（无 opener）、或 HTTPS 页面跳转到 HTTP 页面时，document.referrer 都会返回空字符串（""），不是 null。
常见误判写法：if (document.referrer) —— 这在空字符串时也会为 false，但更稳妥的是显式比对：if (document.referrer !== "")。
- 本地双击打开 HTML 文件（
file://协议）必然为空 - Chrome/Firefox/Safari 在严格 referrer 策略下（如
strict-origin-when-cross-origin）跨域时只传 origin，不传完整 URL - 某些广告/统计 SDK 会主动清除 referrer（例如通过中间跳转页 +
rel="noreferrer"）
如何安全读取并解析 document.referrer 的主机或路径
不能直接对 document.referrer 调用 URL 构造函数——它可能为空或格式非法，会抛 TypeError。必须先校验再解析。
推荐写法：
const ref = document.referrer;
let hostname = "";
let pathname = "";
if (ref && ref.startsWith("http")) {
try {
const url = new URL(ref);
hostname = url.hostname;
pathname = url.pathname;
} catch (e) {
// 忽略解析失败（如 ref 是 malformed URL）
}
}
- 不要依赖
document.referrer.indexOf("example.com") !== -1做来源判断——容易被伪造或误匹配 - 若需判断是否来自同站，用
url.origin === location.origin更可靠 - 注意：
new URL("")会报错，所以ref && ref.startsWith("http")是必要前置检查
替代方案：什么时候不该依赖 document.referrer
当业务逻辑强依赖“上一页”信息（比如返回按钮、来源埋点、权限跳转拦截），仅靠 document.referrer 不够稳定，必须补充兜底机制。
- SPA 路由跳转（React Router / Vue Router）默认不触发 referrer，需手动存：跳转前写入
sessionStorage.setItem("prevPath", location.pathname) - 服务端渲染页面可由后端注入初始 referrer 到
<script></script>或data-属性中，避免客户端丢失 - 跨域 iframe 场景下，父页无法读子页的
document.referrer；子页也拿不到父页完整 URL（仅能通过window.parent.location.origin获取 origin）
referrerpolicy 属性对 document.referrer 的影响
页面级或元素级的 referrerpolicy 会限制浏览器发送 Referer HTTP 头，进而影响 document.referrer 的内容——尤其是跨域请求时。
例如，在 <a href="/next" referrerpolicy="no-referrer"></a> 点击后，目标页的 document.referrer 就是空字符串。
- 常用值：
no-referrer（完全不传）、origin（只传协议+域名+端口）、strict-origin-when-cross-origin（默认值，HTTPS→HTTP 时不传） - 全局设置可在
<meta name="referrer" content="origin">中声明 - 注意：
referrerpolicy控制的是「发出请求时」的行为，不影响已加载页面的document.referrer值本身
真正麻烦的不是 referrer 为空，而是它“有时有、有时没”却没做 fallback —— 比如返回按钮只靠 history.back()，却不检查 history.length 或 referrer 是否可用，用户点一下就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
