如何在GreaseMonkey中移除历史记录条目优化页面回退？

核心思路 #

当脚本自动触发POST请求后，通过修改浏览器历史记录，让回退操作直接跳过初始的GET页面。主要有两种可靠实现方式：替换历史记录条目，或监听回退事件主动跳过GET页面。

具体实现方案 #

方案一：替换历史记录（推荐） #

POST请求完成后，用当前POST页面的状态替换掉历史栈中GET页面的记录，这样浏览器历史里只会保留POST页面的条目，回退时直接回到更早的页面。

示例代码：

// ==UserScript==
// @name        自动提交并处理回退
// @namespace   internal-form-handler
// @match       http://你的内部URL/*
// @grant       none
// @version     1.0
// @description 自动提交表单，回退时跳过GET页面
// ==/UserScript==

(function() {
    'use strict';

    // 检测是否为GET请求的表单页面
    const targetForm = document.querySelector('form[method="POST"]');
    if (targetForm) {
        // 自动点击提交按钮
        const submitBtn = targetForm.querySelector('button[type="submit"]') || targetForm.querySelector('[type="submit"]');
        if (submitBtn) {
            submitBtn.click();
            
            // 等待POST页面加载完成后替换历史记录
            setTimeout(() => {
                history.replaceState(null, document.title, window.location.href);
            }, 1200); // 可根据页面实际加载速度调整延迟时间
        }
    }
})();

方案二：监听回退事件 #

通过监听popstate事件，当检测到回退到GET表单页面时，主动执行一次回退操作，直接跳过该页面。

示例代码：

// ==UserScript==
// @name        自动提交并处理回退
// @namespace   internal-form-handler
// @match       http://你的内部URL/*
// @grant       none
// @version     1.0
// @description 自动提交表单，回退时跳过GET页面
// ==/UserScript==

(function() {
    'use strict';

    // 自动提交逻辑
    const targetForm = document.querySelector('form[method="POST"]');
    if (targetForm) {
        const submitBtn = targetForm.querySelector('button[type="submit"]') || targetForm.querySelector('[type="submit"]');
        submitBtn?.click();
    }

    // 监听回退事件
    window.addEventListener('popstate', () => {
        // 检测是否回到了GET表单页面
        if (document.querySelector('form[method="POST"]')) {
            // 再次回退，跳过GET页面
            history.back();
        }
    });
})();

方案说明 #

• 方案一的优势是不会出现GET页面闪现，体验更流畅；需要注意设置合适的延迟，确保POST页面已加载完成再执行替换。
• 方案二无需等待页面加载，但回退时可能会短暂显示GET页面，适合页面加载速度较快的场景。

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