[js] 顶栏添加刷新按钮

作用

在顶栏 VIP 按钮前面添加一个刷新按钮,就算不显示 VIP 按钮也能正常添加。(附图中就是不显示的)

PixPin20241013181435.png

代码

(function() {
  function addBtnRefresh() {
    let settingBtn = document.createElement("div");
    settingBtn.id = "refreshBtn";
    settingBtn.classList = "ariaLabel toolbar__item";
    settingBtn.ariaLabel = "刷新页面";
    settingBtn.innerHTML = `<svg><use xlink:href="#iconRefresh"></use></svg>`;

    settingBtn.addEventListener(
      "click",
      function (e) {
        location.reload();
      }
    );
    return settingBtn;
  }
var vip = document.getElementById("toolbarVIP");
vip.parentNode.insertBefore(addBtnRefresh(),vip);
})();

使用方法

将代码复制到代码片段里面启用。

注意事项

没有做特殊判断,虽然插件只添加一次按钮,但是极为特殊情况下可能出现别的现象(几乎完全不会出现问题)。

我记得快捷键那里的刷新就是用的 reload,所以这里直接拿来用了。主题里面也用的刷新,没见出问题。如果遇到有内容不刷新还请告诉我。

参考代码

[js] 全屏和刷新按钮、右上角倒计时 - 链滴

[js] 顶栏倒计时 - 链滴

  • 思源笔记

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

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

    21601 引用 • 85468 回帖 • 3 关注
  • 代码片段

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

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

    41 引用 • 219 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...