如何让JS滑动脚本仅在从内部页返回首页时生效？

要实现仅从网站内部页面返回首页时触发滑动跳转，首次加载首页不生效，核心是区分「首次访问首页」和「从内部页面返回首页」两种场景，以下是两种可行方案：

方案一：来源判断+SessionStorage标记（无需修改内部页面） #

利用document.referrer判断页面来源是否为同域内部页面，结合SessionStorage记录首次访问状态，避免刷新或重复触发：

let touchstartX = 0;
let touchendX = 0;

// 判断当前是否从同域内部页面跳转而来
const isFromInternalPage = document.referrer.includes(window.location.origin) && 
                          document.referrer !== window.location.href;

// 页面加载时初始化状态：首次访问首页则标记，从内部返回则保持可触发状态
if (!sessionStorage.getItem('hasVisitedHome') && !isFromInternalPage) {
  sessionStorage.setItem('hasVisitedHome', 'true');
}

function checkDirection() {
  // 只有非首次加载首页（即从内部页面返回）时，才触发跳转
  const isFirstLoad = sessionStorage.getItem('hasVisitedHome') === 'true';
  if (touchendX < touchstartX && !isFirstLoad) {
    window.location.href = '/';
    // 触发后标记，当前会话内不再重复触发
    sessionStorage.setItem('hasVisitedHome', 'true');
  }
}

document.addEventListener('touchstart', (e) => {
  touchstartX = e.changedTouches[0].screenX;
});

document.addEventListener('touchend', (e) => {
  touchendX = e.changedTouches[0].screenX;
  checkDirection();
});

逻辑说明： #

1. isFromInternalPage：验证页面来源是否为同域下的其他页面（排除首页自身刷新的情况）
2. 页面加载时，若为首次访问首页（无hasVisitedHome标记且来源不是内部页面），则设置标记
3. 滑动判断时，仅当无hasVisitedHome标记（即从内部页面返回），才执行跳转；跳转后标记状态，避免当前会话内重复触发

方案二：内部页面跳转前设置临时标记（精准控制） #

如果可以修改内部页面的跳转逻辑，这种方式更精准：

步骤1：内部页面跳转前添加标记 #

在所有跳转到首页的内部页面代码中，设置临时SessionStorage标记：

// 内部页面跳转到首页的函数示例
function navigateToHome() {
  sessionStorage.setItem('fromInternalPage', 'true');
  window.location.href = '/';
}

步骤2：首页脚本读取并判断标记 #

首页加载时读取标记，用完立即清除，确保仅本次返回生效：

let touchstartX = 0;
let touchendX = 0;

// 读取标记并立即清除，避免刷新首页后仍生效
const isFromInternal = sessionStorage.getItem('fromInternalPage') === 'true';
if (isFromInternal) {
  sessionStorage.removeItem('fromInternalPage');
}

function checkDirection() {
  // 仅从内部页面返回时触发跳转
  if (touchendX < touchstartX && isFromInternal) {
    window.location.href = '/';
  }
}

document.addEventListener('touchstart', (e) => {
  touchstartX = e.changedTouches[0].screenX;
});

document.addEventListener('touchend', (e) => {
  touchendX = e.changedTouches[0].screenX;
  checkDirection();
});

逻辑说明： #

• 内部页面跳转时设置临时标记，首页加载后立即读取并删除，确保只有「从内部页面返回」的那次加载会激活滑动脚本
• 首页刷新时，因无标记存在，滑动逻辑不会触发

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