← 全部文章

教程

JustZix 在动态(SPA)页面上无需 F5 即可生效

18 5月 2026 · 作者 JustZix Team

越来越多的网站是单页应用(SPA):你一点击,地址栏变了,但页面并没有重新加载。JustZix 过去注意不到这样的变化——匹配到 URL 路径的规则只在 F5 之后才出现。本文解释什么变了,以及为什么这很重要。

不重新加载的导航是什么意思

在传统网站上,每一次切换都是一次全新的文档加载。SPA 则改为即时替换内容,并通过 history.pushState 或 replaceState 更新地址。Google Ads 面板、许多管理后台和现代 Web 应用都是这样运作的。

问题:规则被“冻结”在第一个 URL 上

JustZix 把规则匹配到 URL 模式。由于页内脚本只在 DOMContentLoaded 和 load 事件上检查 URL,在一个 SPA 内部导航之后匹配并不会刷新。浮动按钮、动作栏、页内窗口以及注入的 CSS 只在手动重新加载页面后才出现或消失。

修复:三条检测通道

扩展现在通过三条通道检测 SPA 导航:popstate 和 hashchange 事件,以及一个对文档变化的观察器。它们全都汇入一个比较 location.href 的廉价守卫——只有当地址确实改变时,规则匹配才重新运行,所以它不会给页面带来负担。

它在实践中给你什么

匹配到某个特定路径的规则——例如广告面板里只匹配 /campaigns——会在你点击应用各处时开启和关闭,无需 F5。固定到 URL 模式的动作栏和窗口同样如此。

提示:写出对 SPA 有韧性的 JS 规则

扩展本身现在会对地址变化作出反应,但你自己的 JS 代码也应该如此。如果一条规则修改 SPA 稍后才渲染的元素,把逻辑包进一个 MutationObserver 里,让它在内容随后载入时也能生效:

// 在 SPA 把内容载入之后也运行
function applyTweak() {
  document.querySelectorAll('.widget').forEach(el => {
    el.style.outline = '2px solid #006870';
  });
}
applyTweak();
new MutationObserver(applyTweak).observe(document.body, {
  childList: true, subtree: true,
});

好处

规则立刻生效,无需手动重新加载。在 SPA 面板上行为是一致的——Google Ads、管理后台和 Web 应用。而 URL 路径匹配终于完全可靠。

许多网站的现成规则在示例目录里。安装 JustZix,在任意 SPA 上测试你的规则。