javascript - 切换导航会刷新url和页面 导致猴油脚本失效 求助怎么解决这个问题？

Question

一个页面有两个导航，切换导航会刷新url和页面 导致猴油脚本失效 求助怎么解决这个问题？

(function () {    'use strict';    function main() {        // 父元素        const parent = document.querySelector('#gar-sub-app-provider');        const search = parent.querySelector('button.ant-btn.ant-btn-primary');        search.addEventListener('click', function () {            let timerId;            let count = 0;            timerId = setInterval(() => {                console.log('打印测试')                if (count < 20) {                    clearInterval(timerId);                }                count++;            }, 100)        });    }    window.onload = function () {        main();    };})();

每次点击查询重启计时器，我试过 在不切换导航的时候会正常运行，但是页面操作完成后会强制性切换到打款记录的页面，我再次点击发起打款 返回后 点查询 定时器就失效了 为什么？

我试过 这样的载入方法也不行

document.addEventListener('DOMContentLoaded', function() {  main();});

Answer 1

看起来你遇到的问题是在导航切换时，你的 JavaScript 脚本无法正常工作。由于在导航切换时页面会刷新，你的脚本可能没有机会运行。

解决这个问题的一种方法是使用 localStorage 或 sessionStorage 来存储一些需要在页面之间保持的状态。你可以在用户点击查询时，将这个事件存储在 localStorage 或 sessionStorage 中。然后在页面加载时，检查这个状态是否存在，如果存在，就重新启动计时器。

例如：

(function () {    'use strict';    function main() {        // 父元素        const parent = document.querySelector('#gar-sub-app-provider');        const search = parent.querySelector('button.ant-btn.ant-btn-primary');        search.addEventListener('click', function () {            let timerId;            let count = 0;            // 检查状态是否存在            if (sessionStorage.getItem('clicked')) {                // 如果存在，重新启动计时器                timerId = setInterval(() => {                    console.log('打印测试')                    if (count < 20) {                        clearInterval(timerId);                    }                    count++;                }, 100)            } else {                // 不存在，存储状态并启动计时器                sessionStorage.setItem('clicked', true);                timerId = setInterval(() => {                    console.log('打印测试')                    if (count < 20) {                        clearInterval(timerId);                    }                    count++;                }, 100)            }        });    }    window.onload = function () {        main();    };})();

以上代码在用户点击查询按钮时会检查 sessionStorage 中是否存在 'clicked' 状态。如果存在，就会重新启动计时器。如果不存在，就会存储这个状态并启动计时器。这样，即使在导航切换后，你的脚本也能保持正确的状态。