如何判断来源URL是否包含/checkout/路径段？调整返回按钮逻辑

需求明确：判断用户是否从含checkout路径段的结账页（如mysite.com.au/checkouts/au/xyz）返回购物车页，以此调整「Continue Shopping」按钮的跳转逻辑。

现有代码的可优化点 #

你的核心判断逻辑没问题，但可以简化并提升健壮性：

• 避免重复绑定点击事件：无需分两次给.js-back绑定事件，把判断逻辑放在回调内更高效
• 可增强URL匹配精度：直接用字符串匹配足够满足基础需求，若要严格匹配路径段可改用正则
• 按需启用默认跳转拦截：注释掉的evt.preventDefault()和history.go()可根据实际需求放开

优化后的代码 #

// 统一绑定点击事件，避免重复逻辑
$('.js-back').on('click', function(evt) {
  // 判断来源URL是否包含结账页标识
  const isFromCheckoutPage = document.referrer.includes('checkouts');

  if (isFromCheckoutPage) {
    evt.preventDefault();
    history.go(-2); // 跳过结账页，返回上上个页面
    console.log('检测到从结账页返回，跳转至上一购物页面');
  } else {
    evt.preventDefault();
    history.go(-1); // 返回直接来源页
    console.log('非结账页返回，跳转至上一页面');
  }
});

进阶优化说明 #

• 若需严格匹配路径中的checkout（避免域名或其他字符串误匹配），可改用正则：

  // 匹配/checkout/或/checkouts/路径段，不区分大小写
  const checkoutPathRegex = /\/checkout(s)?\//i;
  const isFromCheckoutPage = checkoutPathRegex.test(document.referrer);
  

• 处理document.referrer为空的情况（用户直接打开页面或隐私模式下可能出现）：

  if (!document.referrer) {
    // 无来源URL时的兜底跳转，示例为跳转到首页
    window.location.href = '/';
    return;
  }
  

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