[js] Shift+F5 刷新页面

常看到大佬们说,刷新页面就行了。那对小白来说,究竟怎么刷新页面呢?

把下面的代码放到 js 代码片段中就可以按 shift+f5 刷新页面了,再也不用按大佬们说的打开什么控制台了。

// Shift+F5 重载界面 JS片段
(()=>{
    document.addEventListener('keydown', function(event) {
        // 检查是否同时按下了 Shift 和 F5 ,并且没有其他修饰键被按下
        if (event.shiftKey && event.key === 'F5' && !event.ctrlKey && !event.altKey && !event.metaKey) {
            event.preventDefault(); // 阻止默认行为
            reloadUI(); // 重载界面 API
        }
    });
    // 刷新UI
    // mode app客户端 desktop浏览器桌面端 mobile移动端
    // see https://github.com/siyuan-note/siyuan/issues/15308
    function reloadUI(mode) {
        // 未安装插件
        if(window.siyuan.ws.app.plugins?.length === 0) {
            if (mode) window.location.pathname = `stage/build/${mode}/`;
            else fetch('/api/ui/reloadUI', { method: 'POST' });
            return;
        }
        // 获取plugin
        const plugin = window.siyuan.ws.app.plugins[0];
        // 旧版
        if(!plugin?.saveLayout) {
            if (mode) window.location.pathname = `stage/build/${mode}/`;
            else fetch('/api/ui/reloadUI', { method: 'POST' });
            return;
        }
        // 新版
        plugin.saveLayout(() => {
            if (mode) window.location.pathname = `stage/build/${mode}/`;
            else window.location.reload();
        });
    }
})();

感谢 @JeffreyChen @wilsons @HugZephyr 帮忙完善和提供的改进后的代码!

没想到简单的刷新背后竟然还有这么多道道。

  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    285 引用 • 1988 回帖
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28446 引用 • 119790 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    736 引用 • 1307 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • location.reload() 有缺陷 Issue #15040 · siyuan-note/siyuan

    调用界面重载的 API 的话更好:

    // Shift+F5 重载界面 JS片段
    document.addEventListener('keydown', function(event) {
        // 检查是否同时按下了 Shift 和 F5 ,并且没有其他修饰键被按下
        if (event.shiftKey && event.key === 'F5' && !event.ctrlKey && !event.altKey && !event.metaKey) {
            event.preventDefault(); // 阻止默认行为
            fetch('/api/ui/reloadUI', { method: 'POST' }); // 重载界面 API
        }
    });
    

    @participants

    3 操作
    JeffreyChen 在 2025-07-16 17:19:56 更新了该回帖
    JeffreyChen 在 2025-07-14 22:28:10 更新了该回帖
    JeffreyChen 在 2025-07-14 22:27:26 更新了该回帖
  • 其他回帖
  • vincents
    作者

    感谢修正,手误 😄

  • wilsons 1 1 赞同

    有 bug

    image.png

    要想绝对的按用户输入顺序判断有点麻烦,不过建议两个都转换为数组,然后排序,连接后再比较。


    不过我觉得下面这种情况能满足绝大多数的场景,对普通用户足够了。但 shift+f5+ 非功能键也会被触发,但这种场景不多,一般都是多个功能键 +1 个非功能键。

    document.addEventListener('keydown', function(event) {
        // 检查是否同时按下了Shift和F5,并且没有其他修饰键被按下
        if (event.shiftKey && event.key === 'F5' && !event.ctrlKey && !event.altKey && !event.metaKey) {
            // true 不使用缓存,false 使用缓存,注意,是否使用缓存仅在firefox浏览器下生效
            location.reload(true);
        }
    });
    

    注意,这里的 location.reload(true); 也不严谨,true 这个参数仅在 firefox 浏览器下生效。

  • HugZephyr

    小声说, 理论上这个片段是不太严谨的

    他在监听到 shift+f5 的时候, 就会被触发

    也就是说, 如果是 ctrl+shift+f5 或者 alt+shift+f5 等 包含 shift+f5 都会触发

    这玩意我也是跟 ai 聊天的时候发现的, 如果遇到类似的问题, 可以参考下面的写法

    // 要监听的快捷键
    const hot_key = "ctrl+n";
    // 判断按下的快捷键, 是否与hostkey相同
    // event: 事件
    // hostkey: 要比较的快捷键
    function checkShortcut(hostkey, event) {
        const keys = hostkey.split("+");
        const key = event.key.toLowerCase();
        const isCtrl = event.ctrlKey ? "ctrl+" : "";
        const isAlt = event.altKey ? "alt+" : "";
        const isShift = event.shiftKey ? "shift+" : "";
    
        const combination = isAlt + isCtrl + isShift + key;
        return keys.sort().join("+") === combination;
    }
    // 监听键盘按下事件
    document.addEventListener('keydown', event => {
        if (checkShortcut(hot_key, event)) {
            // 快捷键触发
        }
    });
    
    1 回复
  • 查看全部回帖

推荐标签 标签

  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 133 关注
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 55 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 662 关注
  • Folo

    Folo 是一个 RSS 阅读和信息聚合应用,整合多种内容源到统一时间线。

    项目地址:https://github.com/RSSNext/Folo

    1 引用 • 3 回帖 • 2 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 650 关注
  • 千千插件

    千千块(自定义块 css 和 js)
    可以用 ai 提示词来无限创作思源笔记

    32 引用 • 69 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    285 引用 • 1988 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 17 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 598 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 193 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    213 引用 • 2044 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 669 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 152 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    176 引用 • 544 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 429 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖 • 1 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 548 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    25 引用 • 373 回帖 • 4 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 443 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 548 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28446 引用 • 119790 回帖