可通过 JavaScript 的 document.referrer 属性判断用户来源页面，并据此动态设置指定 div（如 #fruitBasket）的 HTML 内容，实现来源驱动的内容差异化展示。
可通过 javascript 的 `document.referrer` 属性判断用户来源页面，并据此动态设置指定 div（如 `#fruitbasket`）的 html 内容，实现来源驱动的内容差异化展示。
在 Web 开发中，有时需要根据用户进入当前页面的“来路”（referrer）呈现不同内容——例如，当用户从特定推广页跳转时展示定制化信息，或为不同渠道用户提供个性化入口。document.referrer 是浏览器提供的原生属性，返回链接到当前页面的上一个文档 URL（若直接输入地址、书签访问、HTTPS→HTTP 跳转或隐私模式下可能为空字符串或被截断）。
以下是一个完整、健壮的实现方案：
<!-- 页面 C（pageC.html）中的目标容器 -->
<div id="fruitBasket"></div>
<script>
// 等待 DOM 加载完成
document.addEventListener('DOMContentLoaded', function() {
const basket = document.getElementById('fruitBasket');
const referrer = document.referrer;
// 注意：referrer 是完整 URL（含协议和域名），需做合理解析与匹配
const isFromPageB = referrer.includes('mywebsite.com/pageB');
const isDirectOrFromOther = !referrer || !isFromPageB;
if (isFromPageB) {
basket.innerHTML = '<img src="/images/orange.jpg" alt="Orange" style="max-width:90%">';
} else {
// 默认内容：来自 pageA、其他页面，或直接访问
basket.innerHTML = '<img src="/images/apple.jpg" alt="Apple" style="max-width:90%">';
}
});
</script>
✅ 关键注意事项：
-
document.referrer不可伪造，但不可靠：部分浏览器/隐私设置会清空该值（如 Firefox 隐私模式、Chrome 的某些安全策略），因此不能用于关键业务逻辑（如权限校验），仅适用于体验增强类场景； - 比较时建议使用
includes()或正则匹配完整路径（如/pageB），避免因协议（http://vshttps://）或末尾斜杠导致误判； - 若需更高可靠性，推荐服务端方案：通过
<a href="pageC.html?ref=pageB"></a>显式传递来源参数，并在 pageC 中用URLSearchParams解析； - 图片路径建议使用相对路径或 CDN 地址，并添加
alt属性保障可访问性。
总结：document.referrer 是轻量、零后端依赖的前端方案，适合快速实现来源感知的内容切换。但务必将其视为“尽力而为”的用户体验优化手段，而非确定性逻辑依据。
