GameMale
设为首页收藏本站 🌓 游客问题反映
快捷导航
登陆 / 注册 搜索

USERCENTER

SEARCHSITE

搜索

返回列表 发新帖
查看: 816|回复: 7
收起左侧

[问题求助] 【脚本求助】如何取消修改网页元素的脚本在加载时导致的页面突变？

[复制链接] |关注本帖

SCP-s-1889-第二页『随时随地开启！』无尽的怀表『随时随地开启！』被释放的灵魂我已倾听，我已感受，我已思考十字叶章Futūrum（未来）可怖的眼球男巫之歌
     楼主| 星之子 发表于 6 天前 | 显示全部楼层 |阅读模式 |取消关注该作者的回复
    200金币
    动机
    昨天搓了这么一个油猴脚本：【油猴脚本】自定义左侧边栏，其功能是修改论坛左侧边栏成想要的样子。
    实际使用过程中，还是遇到了一点点问题，即在页面完全加载之前，左侧边栏依然维持原来的样子，加载完成后脚本才会生效——这会导致边栏突变，或者说“闪动”。在打开主页和我的勋章时尤为明显，强迫症震怒。

    需求
    我尝试过使用@Run document-start来调整脚本的运行时点，但这有可能导致脚本加载不稳定，一旦错过了对应时点，脚本就不加载了。而相比不稳定我宁可它闪动（悲）
    总之，希望各位大佬能通过修改这个脚本、或任意能实现相同功能的方法，把这个“闪动”撒掉。提前感谢惹(´▽`ʃ♡ƪ)~

    最佳答案

    咸鱼鱼

    查看完整内容

    修改运行时间是唯一正确的做法 因为这个闪动是因为，脚本的默认执行时间是在页面完全加载完之后，再进行的修改 你想不要这个闪动，只能比页面完全加载更早 还有一个方案你可以自己尝试一下 原来的列表，用adblock之类的东西给他干掉 自己用油猴脚本写一个新的 adblock也是在页面加载之前就阻止了，比油猴的docment-start还要快一点 不过可能也会闪，不过闪一般是有变化的话，肉眼感觉比较明显 如果是空白的页面，也许肉眼就感觉 ...

    已有1人关注本帖

    liuhuo0
    楼主新帖
    楼主热帖
    回复

    使用道具 举报

    『逆境中的幸运女神』苍穹禁城最终幻想XIV琉璃玉坠黄金树的恩惠炽天使之拥森林鹿夏日柯基苏醒的格罗姆
      咸鱼鱼 发表于 6 天前 | 显示全部楼层 |取消关注该作者的回复
      本帖最后由 咸鱼鱼 于 2024-11-15 02:47 编辑

      修改运行时间是唯一正确的做法
      因为这个闪动是因为，脚本的默认执行时间是在页面完全加载完之后，再进行的修改
      你想不要这个闪动，只能比页面完全加载更早

      还有一个方案你可以自己尝试一下
      原来的列表，用adblock之类的东西给他干掉
      自己用油猴脚本写一个新的
      adblock也是在页面加载之前就阻止了，比油猴的docment-start还要快一点

      不过可能也会闪，不过闪一般是有变化的话，肉眼感觉比较明显
      如果是空白的页面，也许肉眼就感觉不到了
      你可以尝试一下


        收起(1)
      回复

      使用道具 举报

      征服之王被释放的灵魂死灵之书圣甲虫秘典破损的旧书吃饱金币的Doge生金蛋的鹅内森·德雷克果体76Futūrum（未来）
        Makima 发表于 6 天前 | 显示全部楼层 |取消关注该作者的回复
        试着修改了一下，效果不大行

        说下我的思路：

        给过渡加特效
        or
        一开始把Menu全部隐藏再显示
           

        document.addEventListener('DOMContentLoaded', () => {
            const navMenu = document.querySelector('.nav-menu');
            if (navMenu) {
                navMenu.style.display = 'none';


        （Run document-start，闪动感觉少了，不过有时候会一直不显示（或许得加个检测？
        ↓
        分成两个脚本，一个隐藏，一个显示状态栏好一点？（还能搞花样

        回复

        使用道具 举报

        男巫之歌内森·德雷克『私有海域』裸体克里斯双向圣杯：焕然意志极·龙の意【圣诞限定】心心念念小雪人小小舞台御医神兔永浴爱河
          墨燝 发表于 6 天前 | 显示全部楼层 |取消关注该作者的回复
          我的gpt告诉我可以使用css先隐藏原先的菜单，目前看起来还可以
          @Name @match


          1. // ==UserScript==
          2. // @name         Custom Nav Menu for Gamemale
          3. // @namespace    http://tampermonkey.net/
          4. // @version      0.1
          5. // @description  删除原有导航菜单并添加自定义菜单，在页面加载前隐藏旧菜单避免抖动
          6. // [url=home.php?mod=space&uid=700810]@Match[/url]        https://www.gamemale.com/*
          7. // @grant        none
          8. // @run-at       document-start
          9. // ==/UserScript==

          11. (function() {
          12.     'use strict';

          14.     // 注入CSS隐藏原菜单，避免加载时短暂显示
          15.     const style = document.createElement('style');
          16.     style.innerHTML = `.nav.nav-menu { display: none !important; }`;
          17.     document.head.appendChild(style);

          19.     // 删除原菜单并插入自定义菜单
          20.     window.addEventListener('DOMContentLoaded', () => {
          21.         // 删除旧菜单
          22.         const navMenu = document.querySelector('.nav.nav-menu');
          23.         if (navMenu) {
          24.             navMenu.remove();
          25.         }

          27.         // 创建新的导航菜单
          28.         const newNavMenu = document.createElement('ul');
          29.         newNavMenu.className = 'nav nav-menu';

          31.         // 自定义菜单项列表
          32.         const menuItems = [
          33.             { href: 'https://www.gamemale.com/forum.php', text: '首 页', title: 'BBS' },
          34.             { href: 'https://www.gamemale.com/forum.php?mod=forumdisplay&fid=150&filter=author&orderby=dateline', text: '和谐动漫 ❤', title: '发帖时间倒序的和谐动漫。'},
          35.             { href: 'https://www.gamemale.com/thread-9039-1-1.html', text: '论坛规范 ★', title: '全面禁水！进站必读！' },
          36.             { href: 'https://www.gamemale.com/home.php?mod=task&do=view&id=14', text: '新人升级 ✌', title: '证明你不是机器人！' },
          37.             { href: 'https://www.gamemale.com/thread-70042-1-1.html', text: '常见问题 ？', title: '' },
          38.             { href: 'wodexunzhang-showxunzhang.html', text: '勋章商城 ▢', title: 'Lv.≥2 来开启勋章大世界！' },
          39.             { href: 'https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=my', text: '我的勋章 ▣', title: '' },
          40.             { href: 'https://www.gamemale.com/home.php?mod=magic', text: '道具商店 ✿', title: '用于帖子和日志的神奇东西！' },
          41.             { href: 'https://www.gamemale.com/home.php?mod=spacecp&ac=credit&op=exchange', text: '血液祭献 ⇄', title: '献出血液换得其他属性积分！' },
          42.             { href: 'plugin.php?id=viewui_draw', text: '你画我猜 ✎', title: '你画我猜奖励多多！' },
          43.             { href: 'tshuz_buyname-tshuz_buyname.html', text: '头衔称号 ≛', title: '不可思议的新身份！' },
          44.             { href: 'https://www.gamemale.com/home.php?mod=task', text: '热门任务 ☑', title: '' },
          45.             { href: 'https://www.gamemale.com/forum-165-1.html', text: '近期活动 ✦', title: '' },
          46.             { href: 'https://www.gamemale.com/forum.php?mod=collection&op=all&order=threadnum', text: '专帖合辑 ▤', title: '一网打尽已整合好帖！' },
          47.             { href: 'nds_up_ques-nds_up_ques.html', text: '科考小队▕▀', title: '' }
          48.         ];

          50.         // 动态创建每一个菜单项
          51.         menuItems.forEach(item => {
          52.             const listItem = document.createElement('li');
          53.             if (item.text == '首 页') {
          54.                 listItem.className = 'hover';
          55.             }
          56.             const link = document.createElement('a');
          57.             link.href = item.href;
          58.             link.textContent = item.text;
          59.             link.title = item.title;
          60.             listItem.appendChild(link);
          61.             newNavMenu.appendChild(listItem);
          62.         });

          64.         // 插入新的菜单
          65.         const header = document.getElementById('hd');
          66.         if (header) {
          67.             header.appendChild(newNavMenu);
          68.         }

          70.         // 移除隐藏样式，显示新菜单
          71.         style.remove();
          72.     });
          73. })();
          复制代码



            收起(1)
          回复

          使用道具 举报

          TRPG版塊黄色就是俏皮思绪骤聚灵光补脑剂布衣+2 上等的收到情书夏日柯基
            福黎 发表于 6 天前 | 显示全部楼层 |取消关注该作者的回复
            本帖最后由 福黎 于 2024-11-16 00:29 编辑

            @Name @match


            1. // ==UserScript==
            2. // <span id="kM0.8494679891935208">[url=home.php?mod=space&uid=668096]@Name[/url]  </span>全局：左侧菜单自定义
            3. // @namespace    http://tampermonkey.net/
            4. // @version      1.0
            5. // @description  修改导航菜单按钮的显示内容、悬浮提示和链接
            6. // @author       Étoiles
            7. // @match        https://www.gamemale.com/*
            8. // @grant        GM_addStyle
            9. // @run-at       document-start
            10. // ==/UserScript==

            12. (function () {
            13.   'use strict';

            15.   // ******通过调整代码运行时间开局添加样式隐藏菜单栏
            16.   GM_addStyle(`.nav.nav-menu{display:none;}`)


            19.   // 定义每个按钮的配置，默认保持不变
            20.   // 1 表示按钮不变
            21.   // 0 表示禁止按钮显示
            22.   // 2 表示修改按钮 请按照[2,"按钮名称","鼠标悬停时的按钮描述","按钮关联到的网址"]格式进行填写
            23.   const buttonConfig = {
            24.       "mn_forum": [1],
            25.       // 首 页

            27.       "mn_N2c45": [2,"和谐动漫 ❤","发帖时间倒序的和谐动漫。","https://www.gamemale.com/forum.php?mod=forumdisplay&fid=150&filter=author&orderby=dateline"],
            28.       // 论坛规范

            30.       "mn_Na183": [2,"ＣＯＤＥ ⌘","看看ＣＯＤＥ版块有啥新鲜事。","https://www.gamemale.com/forum.php?mod=forumdisplay&fid=206&filter=author&orderby=dateline"],
            31.       // 新人升级

            33.       "mn_N69dc": [2,"二手市场 ▧","二手市场一键直达！","https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=showjishou"],
            34.       // 常见问题

            36.       "mn_Nf376": [2,"勋章商城 ▤"],
            37.       // 勋章商城

            39.       "mn_N13d5": [1],
            40.       // 我的勋章

            42.       "mn_Nc5cc": [1],
            43.       // 道具商店

            45.       "mn_N35bc": [1],
            46.       // 血液祭献

            48.       "mn_N34e7": [2,"记录广场 ◉","快速查看当前热点~","https://www.gamemale.com/home.php?mod=space&do=doing&view=all"],
            49.       // 你画我猜

            51.       "mn_N50a7": [2,"头衔称号 ♞"],
            52.       // 头衔称号

            54.       "mn_Ncfa1": [2,"热门任务 ✈"],
            55.       // 热门任务

            57.       "mn_N2e25": [2,"我的访客 ☎","看看有谁来过我的空间。","https://www.gamemale.com/home.php?mod=space&do=friend&view=visitor"],
            58.       // 近期活动

            60.       "mn_N4483": [2,"本月调查 ♬","快速查看所有投票帖。","https://www.gamemale.com/forum.php?mod=collection&action=view&ctid=352&fromop=all"],
            61.       // 专帖合辑

            63.       "mn_Ncc15": [0]
            64.       // 科考小队
            65.   };

            67.   // 创建MutationObserver实例
            68.   const observer = new MutationObserver((mutations) => {
            69.       mutations.forEach((mutation) => {
            70.           if (mutation.type === 'childList') {
            71.               // 获取所有的按钮列表
            72.               const navMenu = document.querySelectorAll('.nav-menu li');

            74.               navMenu.forEach((button) => {
            75.                   const buttonId = button.id;
            76.                   if (buttonConfig.hasOwnProperty(buttonId)) {
            77.                       const config = buttonConfig[buttonId];
            78.                       const displayMode = config[0];

            80.                       if (displayMode === 0) {
            81.                           // 设置为0则隐藏按钮
            82.                           button.style.display = 'none';
            83.                       } else if (displayMode === 2) {
            84.                           // 设置为2则修改按钮
            85.                           const linkElement = button.querySelector('a');
            86.                           if (linkElement) {
            87.                               // 设置按钮显示内容
            88.                               if (config[1]) linkElement.textContent = config[1];
            89.                               // 设置悬浮提示内容
            90.                               if (config[2]) linkElement.title = config[2];
            91.                               // 设置链接
            92.                               if (config[3]) linkElement.href = config[3];
            93.                           }
            94.                       }
            95.                   }
            96.               });

            98.               // *****在修改完代码后重新显示菜单栏
            99.               document.querySelector('.nav.nav-menu').style.display = 'block'
            100.           }
            101.       });
            102.   });

            104.   // 开始观察目标节点
            105.   observer.observe(document.body, { childList: true, subtree: true });
            106. })();
            复制代码


              收起(1)
            回复

            使用道具 举报

            返回列表 发新帖
            高级模式
            B Color Image Link Quote Code Smilies
            您需要登录后才可以回帖 登录 | 立即注册

            本版积分规则

            文字版|手机版|小黑屋|GameMale

            GMT+8, 2024-11-21 18:37 , Processed in 0.064720 second(s), 54 queries , Redis On.

            Copyright © 2013-2024 GameMale

            All Rights Reserved.

            快速回复 返回列表