如何根据网站访客的来源页面差异化填充指定div的内容？

嘿，这个需求我之前做项目时刚好碰到过，给你两个实用的前端实现方案，都不用依赖后端就能搞定：

方法一：利用浏览器自带的来源页标记（document.referrer） #

浏览器有个自带的document.referrer属性，会记录用户是从哪个页面跳转过来的，直接用它就能判断来源：

实现步骤： #

• 先获取到你要修改的fruitBasket div元素
• 读取来源页面的地址
• 判断是否来自pageB，再切换对应内容

代码示例： #

// 获取目标div
const fruitBasket = document.getElementById('fruitBasket');
// 获取访客的来源页面地址
const referrerPage = document.referrer;

// 先设置默认内容：苹果图片（对应直接访问、从pageA或其他页面跳转的情况）
fruitBasket.innerHTML = '<img src="apple.jpg" alt="苹果">';

// 检查是否是从pageB跳转过来的，这里把"pageB"换成你实际的pageB页面路径，比如"yourwebsite.com/pageB"
if (referrerPage.includes('pageB')) {
    // 替换成橙子图片
    fruitBasket.innerHTML = '<img src="orange.jpg" alt="橙子">';
}

注意点： #

• 如果用户是直接输入URL访问pageC，document.referrer会是空字符串，这时候就会显示默认的苹果，刚好符合你的需求
• 部分浏览器的隐私模式或者安全设置会屏蔽这个属性，导致document.referrer为空，这时候就会 fallback 到默认内容

方法二：通过URL参数主动传递来源标记 #

这个方法更可靠，不受浏览器隐私设置影响，核心是在pageB的跳转链接里加个专属参数，让pageC能识别出来：

实现步骤： #

1. 先修改pageB里跳转到pageC的链接，加上参数标记，比如?from=pageB
2. 在pageC的JS里读取这个参数，再判断切换内容

代码示例： #

第一步：修改pageB的跳转链接

<!-- pageB里的跳转链接改成这样 -->
<a href="pageC.html?from=pageB">前往pageC</a>

第二步：pageC里的判断代码

const fruitBasket = document.getElementById('fruitBasket');
// 解析URL里的参数
const urlParams = new URLSearchParams(window.location.search);
// 获取来源标记
const fromPage = urlParams.get('from');

// 默认显示苹果图片
fruitBasket.innerHTML = '<img src="apple.jpg" alt="苹果">';

// 如果来源标记是pageB，就换成橙子
if (fromPage === 'pageB') {
    fruitBasket.innerHTML = '<img src="orange.jpg" alt="橙子">';
}

注意点： #

• 这个方法的兼容性和稳定性更好，不会被浏览器隐私设置影响
• 缺点是需要你修改pageB里所有跳转到pageC的链接，如果这类链接很多的话要注意改全

个人更推荐用第二种方法，毕竟稳定性更高，不会出现因为浏览器设置导致判断失效的情况~

备注：内容来源于stack exchange，提问作者Q-Tip