【脚本求助】如何取消修改网页元素的脚本在加载时导致的页面突变？
动机昨天搓了这么一个油猴脚本：【油猴脚本】自定义左侧边栏，其功能是修改论坛左侧边栏成想要的样子。
实际使用过程中，还是遇到了一点点问题，即在页面完全加载之前，左侧边栏依然维持原来的样子，加载完成后脚本才会生效——这会导致边栏突变，或者说“闪动”。在打开主页和我的勋章时尤为明显，强迫症震怒。
需求
我尝试过使用@Run document-start来调整脚本的运行时点，但这有可能导致脚本加载不稳定，一旦错过了对应时点，脚本就不加载了。而相比不稳定我宁可它闪动（悲）
总之，希望各位大佬能通过修改这个脚本、或任意能实现相同功能的方法，把这个“闪动”撒掉。提前感谢惹(´▽`ʃ♡ƪ)~ 本帖最后由 咸鱼鱼 于 2024-11-15 02:47 编辑
修改运行时间是唯一正确的做法
因为这个闪动是因为，脚本的默认执行时间是在页面完全加载完之后，再进行的修改
你想不要这个闪动，只能比页面完全加载更早
还有一个方案你可以自己尝试一下
原来的列表，用adblock之类的东西给他干掉
自己用油猴脚本写一个新的
adblock也是在页面加载之前就阻止了，比油猴的docment-start还要快一点
不过可能也会闪，不过闪一般是有变化的话，肉眼感觉比较明显
如果是空白的页面，也许肉眼就感觉不到了
你可以尝试一下
试着修改了一下，效果不大行
说下我的思路：
给过渡加特效
or
一开始把Menu全部隐藏再显示
document.addEventListener('DOMContentLoaded', () => {
const navMenu = document.querySelector('.nav-menu');
if (navMenu) {
navMenu.style.display = 'none';
（Run document-start，闪动感觉少了，不过有时候会一直不显示（或许得加个检测？
↓
分成两个脚本，一个隐藏，一个显示状态栏好一点？（还能搞花样
我的gpt告诉我可以使用css先隐藏原先的菜单，目前看起来还可以
@Name @match
// ==UserScript==
// @name Custom Nav Menu for Gamemale
// @namespace http://tampermonkey.net/
// @version 0.1
// @description删除原有导航菜单并添加自定义菜单，在页面加载前隐藏旧菜单避免抖动
// @Match https://www.gamemale.com/*
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// 注入CSS隐藏原菜单，避免加载时短暂显示
const style = document.createElement('style');
style.innerHTML = `.nav.nav-menu { display: none !important; }`;
document.head.appendChild(style);
// 删除原菜单并插入自定义菜单
window.addEventListener('DOMContentLoaded', () => {
// 删除旧菜单
const navMenu = document.querySelector('.nav.nav-menu');
if (navMenu) {
navMenu.remove();
}
// 创建新的导航菜单
const newNavMenu = document.createElement('ul');
newNavMenu.className = 'nav nav-menu';
// 自定义菜单项列表
const menuItems = [
{ href: 'https://www.gamemale.com/forum.php', text: '首 页', title: 'BBS' },
{ href: 'https://www.gamemale.com/forum.php?mod=forumdisplay&fid=150&filter=author&orderby=dateline', text: '和谐动漫 ❤', title: '发帖时间倒序的和谐动漫。'},
{ href: 'https://www.gamemale.com/thread-9039-1-1.html', text: '论坛规范 ★', title: '全面禁水！进站必读！' },
{ href: 'https://www.gamemale.com/home.php?mod=task&do=view&id=14', text: '新人升级 ✌', title: '证明你不是机器人！' },
{ href: 'https://www.gamemale.com/thread-70042-1-1.html', text: '常见问题 ？', title: '' },
{ href: 'wodexunzhang-showxunzhang.html', text: '勋章商城 ▢', title: 'Lv.≥2 来开启勋章大世界！' },
{ href: 'https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=my', text: '我的勋章 ▣', title: '' },
{ href: 'https://www.gamemale.com/home.php?mod=magic', text: '道具商店 ✿', title: '用于帖子和日志的神奇东西！' },
{ href: 'https://www.gamemale.com/home.php?mod=spacecp&ac=credit&op=exchange', text: '血液祭献 ⇄', title: '献出血液换得其他属性积分！' },
{ href: 'plugin.php?id=viewui_draw', text: '你画我猜 ✎', title: '你画我猜奖励多多！' },
{ href: 'tshuz_buyname-tshuz_buyname.html', text: '头衔称号 ≛', title: '不可思议的新身份！' },
{ href: 'https://www.gamemale.com/home.php?mod=task', text: '热门任务 ☑', title: '' },
{ href: 'https://www.gamemale.com/forum-165-1.html', text: '近期活动 ✦', title: '' },
{ href: 'https://www.gamemale.com/forum.php?mod=collection&op=all&order=threadnum', text: '专帖合辑 ▤', title: '一网打尽已整合好帖！' },
{ href: 'nds_up_ques-nds_up_ques.html', text: '科考小队▕▀', title: '' }
];
// 动态创建每一个菜单项
menuItems.forEach(item => {
const listItem = document.createElement('li');
if (item.text == '首 页') {
listItem.className = 'hover';
}
const link = document.createElement('a');
link.href = item.href;
link.textContent = item.text;
link.title = item.title;
listItem.appendChild(link);
newNavMenu.appendChild(listItem);
});
// 插入新的菜单
const header = document.getElementById('hd');
if (header) {
header.appendChild(newNavMenu);
}
// 移除隐藏样式，显示新菜单
style.remove();
});
})();
本帖最后由 福黎 于 2024-11-16 00:29 编辑
@Name @match
// ==UserScript==
// <span id="kM0.8494679891935208">@Name</span>全局：左侧菜单自定义
// @namespace http://tampermonkey.net/
// @version 1.0
// @description修改导航菜单按钮的显示内容、悬浮提示和链接
// @author Étoiles
// @match https://www.gamemale.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
(function () {
'use strict';
// ******通过调整代码运行时间开局添加样式隐藏菜单栏
GM_addStyle(`.nav.nav-menu{display:none;}`)
// 定义每个按钮的配置，默认保持不变
// 1 表示按钮不变
// 0 表示禁止按钮显示
// 2 表示修改按钮 请按照格式进行填写
const buttonConfig = {
"mn_forum": ,
// 首 页
"mn_N2c45": ,
// 论坛规范
"mn_Na183": ,
// 新人升级
"mn_N69dc": ,
// 常见问题
"mn_Nf376": ,
// 勋章商城
"mn_N13d5": ,
// 我的勋章
"mn_Nc5cc": ,
// 道具商店
"mn_N35bc": ,
// 血液祭献
"mn_N34e7": ,
// 你画我猜
"mn_N50a7": ,
// 头衔称号
"mn_Ncfa1": ,
// 热门任务
"mn_N2e25": ,
// 近期活动
"mn_N4483": ,
// 专帖合辑
"mn_Ncc15":
// 科考小队
};
// 创建MutationObserver实例
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
// 获取所有的按钮列表
const navMenu = document.querySelectorAll('.nav-menu li');
navMenu.forEach((button) => {
const buttonId = button.id;
if (buttonConfig.hasOwnProperty(buttonId)) {
const config = buttonConfig;
const displayMode = config;
if (displayMode === 0) {
// 设置为0则隐藏按钮
button.style.display = 'none';
} else if (displayMode === 2) {
// 设置为2则修改按钮
const linkElement = button.querySelector('a');
if (linkElement) {
// 设置按钮显示内容
if (config) linkElement.textContent = config;
// 设置悬浮提示内容
if (config) linkElement.title = config;
// 设置链接
if (config) linkElement.href = config;
}
}
}
});
// *****在修改完代码后重新显示菜单栏
document.querySelector('.nav.nav-menu').style.display = 'block'
}
});
});
// 开始观察目标节点
observer.observe(document.body, { childList: true, subtree: true });
})();
页:
[1]