我正在尝试使用 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.
...
我不明白为什么它在作为用户脚本运行时没有检测到元素
<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; }');