本文介绍如何利用 JavaScript 的 document.referrer 属性，在页面加载时根据用户来源（直接访问、来自 pageA 或 pageB 等）动态设置指定 div（如 #fruitBasket）的内容，实现精准的上下文感知展示。
本文介绍如何利用 javascript 的 `document.referrer` 属性，在页面加载时根据用户来源（直接访问、来自 pagea 或 pageb 等）动态设置指定 div（如 `#fruitbasket`）的内容，实现精准的上下文感知展示。
在构建用户体验精细化的网站时，常需根据用户“从哪来”呈现不同内容——例如落地页上的推荐商品、引导文案或图片，可随来源页面智能切换。document.referrer 是浏览器原生提供的只读属性，返回导航至当前页面的上一页面 URL（若无来源则为空字符串），是实现该需求最轻量、兼容性最佳的方案。
以下是一个完整、健壮的实现示例，适用于 pageC.html：
<!DOCTYPE html>
<html>
<head><title>Page C</title></head>
<body>
<div id="fruitBasket"></div>
<script>
// 确保 DOM 加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
const basket = document.getElementById('fruitBasket');
const referrer = document.referrer;
// 注意：referrer 包含协议和端口（如 https://mywebsite.com/pageB），需做合理解析
const hostname = new URL(referrer).hostname || '';
const pathname = new URL(referrer).pathname || '';
if (!referrer) {
// 直接输入 URL 或书签访问 → 显示苹果
basket.innerHTML = '<img src="/images/apple.jpg" alt="Apple" style="max-width:90%">';
} else if (pathname === '/pageB') {
// 来自 pageB → 显示橙子（满足题设核心条件）
basket.innerHTML = '<img src="/images/orange.jpg" alt="Orange" style="max-width:90%">';
} else {
// 其他所有来源（包括 pageA、外部网站、pageD 等）→ 默认显示苹果
basket.innerHTML = '<img src="/images/apple.jpg" alt="Apple" style="max-width:90%">';
}
});
</script>
</body>
</html>✅ 关键注意事项：
-
document.referrer在用户通过location.replace()、HTTPS→HTTP 跳转、或启用了隐私模式/屏蔽 referrer 的浏览器中可能为空或被截断，不可用于安全敏感逻辑； - 建议使用
new URL(referrer)解析路径，避免字符串全匹配导致的误判（如mywebsite.com/pageB?utm_source=ads）； - 若需更高可靠性（如跨域、SPA 场景），应配合服务端传递参数（如
?ref=pageB）或客户端存储（sessionStorage）作为补充方案。
综上，referrer 是实现“来源驱动内容”的首选前端方案——简洁、零依赖、开箱即用。只需谨慎处理边界情况，即可稳定支撑个性化展示需求。
