如何创建同一URL下根据访问来源展示不同内容的跳转页？

核心要实现的效果是：所有访客访问的跳转页地址完全一致，系统自动识别访客的来源页面携带的目标地址参数，给不同访客绑定对应跳转链接，不需要给跳转页加任何区分参数。以下是两种可直接落地的实现方式：

方案1：纯前端静态实现（无后端依赖，部署成本最低） #

这个方案不需要改动服务端配置，普通静态页面托管就能跑，适合没有后端操作权限的场景。

• 实现逻辑：利用同域名下同标签页共享的sessionStorage做参数传递，避免浏览器隐私策略拦截referrer导致识别失败，同时加referrer解析做兜底。
• 第一步：在来源页面（即路径为/page的页面）插入以下脚本，页面加载时自动提取当前URL里的u参数暂存：

// 来源页脚本
const urlParams = new URLSearchParams(window.location.search);
const targetJumpUrl = urlParams.get('u');
if (targetJumpUrl) {
  // 基础合法性校验，避免恶意构造参数实现钓鱼跳转
  if (targetJumpUrl.startsWith('http://') || targetJumpUrl.startsWith('https://')) {
    sessionStorage.setItem('temp_jump_target', targetJumpUrl);
  }
}

• 第二步：在跳转页（即路径为/redirect-page的页面）写入按钮结构和对应逻辑：

<!-- 跳转页按钮结构 -->
<button id="submitJump">立即前往</button>

// 跳转页逻辑脚本
const jumpBtn = document.getElementById('submitJump');
let target = sessionStorage.getItem('temp_jump_target');

// 兜底逻辑：存储未取到值时，尝试解析来源URL的参数
if (!target && document.referrer) {
  try {
    const referrerUrl = new URL(document.referrer);
    target = referrerUrl.searchParams.get('u');
    if (target && !(target.startsWith('http://') || target.startsWith('https://'))) {
      target = null;
    }
  } catch (err) {
    target = null;
  }
}

// 绑定跳转逻辑
if (target) {
  // 可在此处根据target值做更多差异化展示，比如替换文案、配图
  jumpBtn.addEventListener('click', () => {
    window.location.href = target;
  });
} else {
  // 识别失败的兜底逻辑，可自行调整为跳首页、展示提示等
  jumpBtn.addEventListener('click', () => {
    window.location.href = '/';
  });
  jumpBtn.innerText = '返回首页';
}

// 清除暂存数据，避免同标签页后续访问串数据
sessionStorage.removeItem('temp_jump_target');

注意：必须保留地址合法性校验逻辑，禁止直接将未校验的参数值设为跳转地址，避免被利用做恶意跳转。

方案2：服务端实现（稳定性最高，无浏览器兼容问题） #

如果站点有后端服务/服务端渲染能力，优先选这个方案，完全不受浏览器隐私策略、JS禁用、存储拦截等问题影响，识别准确率100%。

• 实现逻辑：
  1. 来源页响应时，服务端自动提取当前URL中的u参数，校验合法性后，给访客种下一个临时Cookie，Cookie值为加密后的目标跳转地址，设置过期时间5-10分钟，作用域为全站。
  2. 访客访问跳转页时，服务端直接从请求携带的Cookie中读取提前存好的目标地址，直接将对应跳转链接渲染到页面按钮上返回给访客即可。
• 优化建议：可以在服务端配置跳转域名白名单，只有参数里的目标地址在白名单内才允许写入Cookie、渲染跳转链接，从根源上避免恶意跳转风险。

方案选型参考 #

• 纯前端方案：部署简单，不需要后端资源，适合个人站、临时活动页使用，做好兜底逻辑后可覆盖绝大多数普通访客场景
• 服务端方案：稳定性强，适合正式业务场景、对跳转准确率要求高的场景使用

内容的提问来源于stack exchange，提问作者Mohamed Essahraoui