优化返回按钮重定向脚本以维持背景音乐连续播放

一、原代码的问题分析与修正 #

你的代码存在几个关键问题：

• 同时混用jQuery的bind("onpopstate")和原生window.onpopstate，事件绑定重复导致逻辑冲突
• previousPage是DOM元素，直接赋值给window.location.href会触发错误跳转，应该取它的文本内容
• document.referrer只能获取上一次跳转的来源页面，无法记录完整历史栈，且缺失初始状态处理

以下是修正后的基础版原生JS代码：

// 初始化时推入当前页面状态，避免首次返回触发异常
window.history.pushState({ path: window.location.href }, "", window.location.href);

// 监听返回按钮触发的popstate事件
window.addEventListener('popstate', function(event) {
    // 存在历史状态数据时，跳转对应路径
    if (event.state && event.state.path) {
        // 用replace跳转，避免重复添加历史记录，保持栈结构稳定
        window.location.replace(event.state.path);
    }
});

// 处理页面内的前进链接点击
document.addEventListener('click', function(e) {
    const link = e.target.closest('.forward-link'); // 假设前进链接有统一类名.forward-link
    if (link && link.href) {
        e.preventDefault(); // 阻止默认跳转行为
        // 先将目标URL推入历史栈
        window.history.pushState({ path: link.href }, "", link.href);
        // 执行跳转，让音乐插件认为是页面内状态变化，保持播放
        window.location.replace(link.href);
    }
});

这段代码的核心逻辑：

1. 页面加载时先存入当前路径的状态，确保历史栈初始有值
2. 监听返回按钮事件，根据历史状态里的路径跳转对应页面
3. 拦截前进链接的默认跳转，先将目标URL推入历史栈，再用replace跳转，维持音乐播放状态

二、拓展多页历史栈功能 #

要实现可反向访问的多页历史栈，核心是手动维护完整的访问路径记录，并在每次跳转时同步更新历史状态。以下是完整实现：

// 全局维护访问历史数组，初始加入当前页面
let historyStack = [window.location.href];

// 初始化历史状态，记录当前栈和索引
window.history.pushState({ stack: [...historyStack], index: 0 }, "", window.location.href);

// 监听popstate事件（返回/前进按钮触发）
window.addEventListener('popstate', function(event) {
    if (!event.state) return;

    const { stack, index } = event.state;
    // 匹配历史栈索引，跳转对应页面
    if (index >= 0 && index < stack.length) {
        historyStack = stack;
        window.location.replace(stack[index]);
    }
});

// 处理所有内部跳转链接
document.addEventListener('click', function(e) {
    const link = e.target.closest('a');
    // 忽略新窗口打开的链接
    if (!link || !link.href || link.target === '_blank') return;

    e.preventDefault();
    const targetUrl = link.href;

    // 如果目标页面已在栈中，截断栈到该页面位置（避免重复历史）
    const existingIndex = historyStack.indexOf(targetUrl);
    if (existingIndex !== -1) {
        historyStack = historyStack.slice(0, existingIndex + 1);
    } else {
        // 否则将新页面加入栈末尾
        historyStack.push(targetUrl);
    }

    // 更新历史状态，记录当前栈和索引
    const currentIndex = historyStack.length - 1;
    window.history.pushState({ stack: [...historyStack], index: currentIndex }, "", targetUrl);
    // 执行跳转
    window.location.replace(targetUrl);
});

这段代码的关键逻辑：

• 用historyStack数组记录所有访问过的页面URL，自动去重并维持有序的访问路径
• 每次跳转时同步更新历史状态里的栈数据和当前索引
• 触发返回/前进按钮时，根据状态中的索引和栈数据，精准跳转到对应的历史页面，同时保持音乐连续播放

注意：刷新页面会重置JS状态，音乐仍会停止，这是浏览器的固有限制。可以额外通过localStorage记录音乐播放进度和状态，刷新后调用插件接口恢复播放，但需要插件提供对应的API支持。

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