尝试使用 TamperMonkey 用户脚本隐藏元素

问题描述 投票:0回答:1

目标

我正在尝试使用 Temper Monkey 用户脚本隐藏元素

测试网页为

https://www.dmla5.com/play/8733-1-5.html.

单击

粉色按钮后,将加载视频。

我的目标是隐藏视频下方的

进度条


总结目标的简化版本

document.getElementsByClassName("leleplayer-bar")[0].hidden = true;
代码

该元素是在单击按钮后加载的,因此我必须添加延迟。

目前,它在直接粘贴到 Google Chrome 开发控制台时可以工作,但不能作为用户脚本工作,请查看我的代码

// ==UserScript== // @name Hide leleplayer-bar // @namespace http://tampermonkey.net/ // @version 0.1 // @description Hides elements with class leleplayer-bar // @author Your name // @match */*/* // @grant none // @run-at document-start // ==/UserScript== (function() { function hideElement() { var elementsToHide = document.getElementsByClassName("leleplayer-bar"); if (elementsToHide.length != 0) { var elementToHide = elementsToHide[0]; console.log("Target element found. Hiding..."); elementToHide.hidden = true; console.log("Element hidden successfully."); return 1; console.log("Observation stopped."); } else { console.log("Target element not found."); } return 0; } function observeDOM() { var targetNode = document.body; var config = { childList: true, subtree: true }; var observer = new MutationObserver(function(mutationsList, observer) { for (var mutation of mutationsList) { if (mutation.type === 'childList') { if (hideElement() === 1) { observer.disconnect(); return; } } } }); observer.observe(targetNode, config); } setTimeout(function() { if (hideElement() === 0) { observeDOM(); } }, 1000); })();
问题

如前所述,代码直接粘贴到控制台上即可运行。当我将它用作脾气猴用户脚本代码时,控制台显示:

Target element not found. Target element not found. Target element not found. Target element not found. ...
我不明白为什么它在作为用户脚本运行时没有检测到元素

javascript hide tampermonkey userscripts
1个回答
0
投票
您要定位的元素位于

<iframe>

 内。
我们可以通过简单地使用 
GM_addStyle
 为其指定样式来隐藏该元素,无需 setTimeout 或 MutationObserver。

您可能想隐藏其他关联元素(时间、预览),使用 leleplayer-bar-wrap

 而不是 
leleplayer-bar

确保您的脚本与正确的 iframe 匹配,在本例中:

https://danmu.yhdmjx.com/


此外,我没有看到在

document-start

 运行脚本的理由。
总的来说,最终的脚本应该是这样的:

// ==UserScript== // @name Hide leleplayer-bar // @namespace http://tampermonkey.net/ // @version 0.1 // @description Hides elements with class leleplayer-bar // @author Your name // @match https://danmu.yhdmjx.com/* // @grant GM_addStyle // ==/UserScript== GM_addStyle('.leleplayer-bar-wrap { display: none; }');
    
© www.soinside.com 2019 - 2024. All rights reserved.