如何在JavaScript中捕获鼠标后退按钮事件并重新路由以关闭网站全屏覆盖层？

当然可以做到！这种场景正是用户脚本的绝佳用武之地——你完全有能力拦截浏览器的后退行为，将其重定向为关闭overlay，而不是跳转到上一页。下面我会拆解实现思路，并给出一个通用的代码模板供你参考。

核心原理 #

浏览器的后退按钮本质上是触发popstate事件并导航历史记录。这类网站的问题在于：它们显示overlay时没有修改浏览器历史状态，所以后退会直接跳转到上一个页面。我们的解决思路是：

• 当overlay出现时，主动往历史记录里添加一条“虚拟”状态
• 监听popstate事件，触发时检查是否有显示的overlay：如果有，就关闭overlay并阻止默认的页面导航；如果没有，就让正常的后退行为执行
• 当用户手动关闭overlay时，清理我们添加的历史状态，避免历史记录混乱

具体实现步骤 #

1. 检测overlay的显示与隐藏 #

首先需要准确识别目标网站的overlay元素。大多数这类网站的全屏overlay会有特定的类名（比如fullscreen-overlay、modal-active），或者会给body添加一个类来标记overlay处于激活状态。我们可以用MutationObserver监听DOM变化（更高效），或者定时检查元素状态。

2. 管理历史状态与拦截后退事件 #

当overlay显示时，调用history.pushState()添加一条自定义状态；当popstate事件触发时，判断当前是否有激活的overlay，如果有则关闭它，并调用history.replaceState()修正历史记录（避免重复触发）。

3. 适配手动关闭overlay的场景 #

当用户点击overlay的关闭按钮（比如右上角的X）时，我们需要移除之前添加的历史状态，保证浏览器历史记录的连贯性。

通用用户脚本示例 #

// ==UserScript==
// @name         后退关闭Overlay
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  让后退按钮关闭全屏覆盖层而非跳转页面
// @author       You
// @match        https://目标宠物领养网站域名/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 请根据目标网站修改这个选择器，定位到全屏overlay元素
    const OVERLAY_SELECTOR = '.fullscreen-overlay';
    // 可选：如果网站用body类标记overlay激活，也可以用这个
    const BODY_ACTIVE_CLASS = 'overlay-open';

    let isOverlayAddedToHistory = false;

    // 检查当前是否有显示的overlay
    function isOverlayActive() {
        const overlay = document.querySelector(OVERLAY_SELECTOR);
        // 结合元素存在+可见性判断，比如检查style.display或类名
        return overlay && overlay.style.display !== 'none' && !overlay.hidden;
        // 或者用body类判断：return document.body.classList.contains(BODY_ACTIVE_CLASS);
    }

    // 关闭overlay的函数，需要根据网站的实际关闭逻辑调整
    function closeOverlay() {
        const overlay = document.querySelector(OVERLAY_SELECTOR);
        if (overlay) {
            // 方式1：模拟点击关闭按钮（如果有）
            const closeBtn = overlay.querySelector('.close-btn, .modal-close');
            if (closeBtn) closeBtn.click();
            // 方式2：直接修改DOM隐藏overlay（如果网站没有绑定关闭事件）
            else overlay.style.display = 'none';
            // 同时移除body的激活类（如果有）
            document.body.classList.remove(BODY_ACTIVE_CLASS);
        }
        // 清理历史状态标记
        isOverlayAddedToHistory = false;
    }

    // 监听overlay的显示
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            const active = isOverlayActive();
            if (active && !isOverlayAddedToHistory) {
                // 添加一条自定义历史状态
                history.pushState({isOverlay: true}, document.title);
                isOverlayAddedToHistory = true;
            } else if (!active && isOverlayAddedToHistory) {
                // 如果overlay被手动关闭，移除我们添加的历史状态
                history.back();
                isOverlayAddedToHistory = false;
            }
        });
    });

    // 监听DOM变化，目标可以是body或者overlay的父元素
    observer.observe(document.body, {
        attributes: true,
        childList: true,
        subtree: true
    });

    // 拦截popstate事件
    window.addEventListener('popstate', (e) => {
        if (isOverlayActive() && e.state?.isOverlay) {
            // 阻止默认的页面导航
            e.preventDefault();
            // 关闭overlay
            closeOverlay();
            // 修正历史记录，避免再次触发popstate
            history.replaceState(null, document.title);
        }
    });

    // 额外处理：如果页面加载时overlay已经显示（比如从链接直接打开）
    if (isOverlayActive()) {
        history.pushState({isOverlay: true}, document.title);
        isOverlayAddedToHistory = true;
    }
})();

关键注意事项 #

• 选择器适配：你需要根据目标网站的实际DOM结构修改OVERLAY_SELECTOR、BODY_ACTIVE_CLASS以及关闭按钮的选择器，这是脚本能正常工作的核心。
• 网站兼容性：有些网站可能用React、Vue等框架管理overlay状态，这时候MutationObserver依然有效，但关闭overlay的方式可能需要模拟框架的状态更新（比如触发对应的点击事件，而不是直接修改DOM）。
• 历史记录一致性：一定要处理手动关闭overlay时的历史状态清理，否则用户会发现点击后退后需要多退一次才能回到上一页。

这个方案完全没有安全限制问题——用户脚本运行在页面的上下文环境中，拥有访问DOM、监听浏览器事件和修改历史状态的权限，完全可以实现你的需求。

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