使用setTimeout重定向后，Chrome和Edge返回按钮异常问题

当通过setTimeout()触发window.location.href跳转或代码模拟点击<a>标签实现页面重定向时，Chrome和Edge浏览器的返回按钮无法回到当前页面，会直接跳转到上上个页面。该问题在Firefox中不存在，且直接在Chrome控制台调用history.back()能正常返回当前页面。

复现场景 #

使用以下测试页面（建议在新标签页打开测试）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <a href="https://stackoverflow.com/">Link</a>
    <button type="button">Button</button>
    <script>
        // 3秒后自动触发a标签点击
        setTimeout(() => document.querySelector('a').click(), 3000);

        // 点击按钮触发a标签点击
        document.querySelector('button').addEventListener('click',
            () => document.querySelector('a').click());
    </script>
</body>
</html>

现象差异 #

• 手动点击按钮触发重定向：Chrome/Edge返回按钮正常，能回到当前测试页
• setTimeout自动触发重定向：Chrome/Edge点击返回按钮会跳过当前测试页，直接回到打开测试页之前的页面

原因分析 #

这是Chrome/Edge的浏览器行为优化逻辑：非用户交互触发的导航操作，会被合并到历史记录栈中。浏览器判定自动触发的跳转不属于用户主动操作，不会为当前页面单独保留历史记录，导致返回时直接跳过当前页。而用户手动点击按钮属于明确的交互行为，会正常在历史栈中添加当前页记录。

解决方案 #

1. 手动补全历史记录（推荐） #

在触发跳转前，调用history.pushState()为当前页面添加一条历史记录，确保返回时能正确回到当前页：

setTimeout(() => {
    // 先将当前页存入历史栈
    history.pushState(null, document.title, window.location.href);
    document.querySelector('a').click();
}, 3000);

2. 直接跳转+补全历史 #

如果是使用window.location.href跳转，同样可以用pushState补全历史：

setTimeout(() => {
    history.pushState(null, document.title, window.location.href);
    window.location.href = "https://stackoverflow.com/";
}, 3000);

3. 模拟真实用户交互事件（兼容性有限） #

通过创建符合浏览器交互检测标准的鼠标事件触发跳转，部分场景下可绕过自动跳转的历史合并逻辑：

setTimeout(() => {
    const a = document.querySelector('a');
    const clickEvent = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    a.dispatchEvent(clickEvent);
}, 3000);

注意：该方式在部分Chrome/Edge新版本中可能被拦截，因为浏览器会严格校验事件是否来自真实用户操作。

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