如何实现每次点击浏览器后退按钮时都能触发指定任务？

原有代码只在页面加载完成后向浏览器历史栈推入一次占位记录，第一次点击后退触发popstate事件后，该占位记录就被弹出历史栈，后续再点击后退会直接跳转至当前页的前一个访问页面，所以只会触发一次自定义逻辑。

$(function() {
    // 定义点击后退时要执行的自定义任务
    const runBackTask = () => {
        // 此处填写你的业务逻辑，例如修改目标元素样式
        $('.target-element').css('background', '#f5f5f5');
    };

    if (window.history && window.history.pushState) {
        // 页面初始化时推入第一条占位记录
        window.history.pushState('', null, './');
        
        $(window).on('popstate', function() {
            // 执行自定义任务
            runBackTask();
            // 任务执行完成后重新推入占位记录，保证下次点击后退仍能触发逻辑
            window.history.pushState('', null, './');
        });
     }
});

• 如果你的业务中存在其他调用pushState/replaceState的逻辑，可给pushState添加自定义状态标识做区分，避免历史栈操作冲突
• 如果需要限定可拦截后退的次数，可新增计数变量，达到指定次数后不再重新推入占位记录，允许用户正常后退离开当前页

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