从第二页返回第一页时，如何在第一页触发alert提示？

嘿，这个需求我之前也碰到过，刚好可以给你分两种返回场景拆解实现方式，完美覆盖你提到的window.location.href和window.history.back()两种返回逻辑：

一、当使用window.location.href返回第一页时 #

这种方式本质是重新加载第一页，所以我们可以通过URL参数传递“从第二页返回”的标记：

步骤1：第二页的跳转代码 #

在第二页的返回按钮点击事件里，给第一页的URL加个自定义参数，比如?from=page2：

// 第二页的返回按钮逻辑
function goBackToPage1() {
  window.location.href = "page1.html?from=page2";
}

步骤2：第一页的检测逻辑 #

第一页加载时，检查URL中是否存在这个参数，存在就触发alert，还可以移除参数避免刷新页面时重复弹出：

// 第一页的代码
window.addEventListener('load', function() {
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('from') && urlParams.get('from') === 'page2') {
    alert('你从第二页返回啦！');
    // 可选：移除URL参数，防止刷新页面再次触发提示
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

二、当使用window.history.back()返回第一页时 #

这种方式是从浏览器历史栈返回，第一页不会重新加载（大概率从缓存恢复），load事件不会触发，所以得用pageshow事件监听，下面给你两种靠谱的标记方案：

方案A：用SessionStorage做标记（兼容性拉满） #

步骤1：第二页设置标记

第二页加载完成后，在sessionStorage里存一个专属标记：

// 第二页的代码
window.addEventListener('load', function() {
  sessionStorage.setItem('isFromPage2', 'true');
});

步骤2：第一页监听返回并检测标记

第一页监听pageshow事件（页面从缓存恢复时也会触发），检测到标记就弹alert，然后立刻移除标记：

// 第一页的代码
window.addEventListener('pageshow', function() {
  if (sessionStorage.getItem('isFromPage2') === 'true') {
    alert('你从第二页返回啦！');
    sessionStorage.removeItem('isFromPage2');
  }
});

方案B：用History State做标记（更贴合历史栈逻辑） #

步骤1：第一页跳转到第二页时记录状态

第一页跳转到第二页前，用pushState给历史记录加个自定义状态：

// 第一页跳转第二页的代码
function goToPage2() {
  window.history.pushState({fromPage1: true}, '', 'page2.html');
  window.location.href = 'page2.html';
}

步骤2：第二页直接调用返回

不需要额外操作，直接用history.back()即可：

// 第二页的返回代码
function goBack() {
  window.history.back();
}

步骤3：第一页监听pageshow检测状态

第一页通过pageshow事件读取历史状态，判断是否来自第二页返回：

// 第一页的代码
window.addEventListener('pageshow', function() {
  if (history.state && history.state.fromPage1) {
    alert('你从第二页返回啦！');
    // 重置历史状态，避免再次返回时重复触发
    window.history.replaceState({}, document.title);
  }
});

总结 #

• 用window.location.href返回时，优先选URL参数的方式，简单直接好维护；
• 用window.history.back()返回时，推荐SessionStorage标记方案，兼容性更强，不用改原有跳转逻辑；

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