☰

移除B站顶部搜索框内的占位符

仅移除B站顶部搜索框内的 placeholder 和 title 属性，如果需要移除所有 input 标签的占位符则可以根据下面文档更改回v0.1代码。

Autor
GaoQiTa
Dnevne instalacije
0
Ukupno instalacija
10
Ocene
1 0 0
Verzija
0.2
Napravljeno
07/01/2025
Ažurirano
08/01/2025
Size
4,34 КБ
Licenca
MIT
Važi za

一、代码解释文档

1、 removeAttributes 函数

function removeAttributes(input) {
    if (input.hasAttribute('placeholder')) {
        input.removeAttribute('placeholder');
    }
    if (input.hasAttribute('title')) {
        input.removeAttribute('title');
    }
}
  • 该函数用于移除传入的 input 元素的 placeholder 和 title 属性。
  • 检查 input 元素是否具有 placeholder 属性，如果有则移除。
  • 检查 input 元素是否具有 title 属性，如果有则移除。

2、 observeInput 函数

function observeInput(input) {
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && (mutation.attributeName === 'placeholder' || mutation.attributeName === 'title')) {
                removeAttributes(mutation.target);
            }
        });
    });

    observer.observe(input, { attributes: true });
}
  • 该函数用于监听传入的 input 元素的属性变化，当 placeholder 或 title 属性发生变化时，移除这些属性。
  • 创建一个 MutationObserver 实例，监听 input 元素的属性变化。
  • 当属性变化时，检查变化的属性是否是 placeholder 或 title，如果是则调用 removeAttributes 方法移除这些属性。
  • 使用 observer.observe 方法开始监听 input 元素的属性变化。

3、初始处理现有的 input 元素

document.querySelectorAll('input').forEach(function(input) {
    removeAttributes(input);
    observeInput(input);
});
  • 该代码块用于处理当前文档中所有现有的 input 元素，移除它们的 placeholder 和 title 属性，并开始监听它们的属性变化。
  • 使用 document.querySelectorAll('input') 获取所有 input 元素。
  • 对每个 input 元素调用 removeAttributes 方法移除属性。
  • 对每个 input 元素调用 observeInput 方法开始监听属性变化。

4、 监听 DOM 变化以处理新添加的 input 元素

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
            if (node.nodeType === 1) {
                if (node.tagName.toLowerCase() === 'input') {
                    removeAttributes(node);
                    observeInput(node);
                } else {
                    node.querySelectorAll('input').forEach(function(input) {
                        removeAttributes(input);
                        observeInput(input);
                    });
                }
            }
        });
    });
});

observer.observe(document.body, { childList: true, subtree: true });
  • 使用 MutationObserver 监听整个文档的 DOM 变化，处理新添加的 input 元素，移除它们的 placeholder 和 title 属性，并开始监听它们的属性变化。
  • 创建一个 MutationObserver 实例，监听文档的子节点变化。
  • 当有新节点被添加时，检查这些节点是否是 input 元素，如果是则调用 removeAttributes 和 observeInput 方法处理它们。
  • 如果新节点不是 input 元素，则检查其子节点中是否有 input 元素，并处理这些子节点。
  • 使用 observer.observe 方法开始监听 document.body 的子节点变化。

5、 handleIframes 函数

function handleIframes() {
    document.querySelectorAll('iframe').forEach(function(iframe) {
        try {
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            iframeDocument.querySelectorAll('input').forEach(function(input) {
                removeAttributes(input);
                observeInput(input);
            });

            const iframeObserver = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === 1) {
                            if (node.tagName.toLowerCase() === 'input') {
                                removeAttributes(node);
                                observeInput(node);
                            } else {
                                node.querySelectorAll('input').forEach(function(input) {
                                    removeAttributes(input);
                                    observeInput(input);
                                });
                            }
                        }
                    });
                });
            });

            iframeObserver.observe(iframeDocument.body, { childList: true, subtree: true });
        } catch (e) {
            console.error('无法访问 iframe:', e);
        }
    });
}
  • 该函数用于处理当前文档中的所有 iframe 元素，移除其中的 input 元素的 placeholder 和 title 属性，并开始监听它们的属性变化和子节点变化。
  • 使用 document.querySelectorAll('iframe') 获取所有 iframe 元素。
  • 对每个 iframe 元素，尝试访问其文档。
  • 对 iframe 文档中的所有 input 元素调用 removeAttributes 和 observeInput 方法处理它们。
  • 创建一个 MutationObserver 实例，监听 iframe 文档的子节点变化。
  • 当有新节点被添加时，检查这些节点是否是 input 元素，如果是则调用 removeAttributes 和 observeInput 方法处理它们。
  • 如果新节点不是 input 元素，则检查其子节点中是否有 input 元素，并处理这些子节点。
  • 使用 iframeObserver.observe 方法开始监听 iframe 文档的子节点变化。
  • 使用 try...catch 块捕获访问 iframe 文档时可能发生的错误。如果发生错误，输出错误信息到控制台。

6、 初始处理现有的 iframe

handleIframes();
  • 该代码行用于初始调用 handleIframes 方法，处理当前文档中的所有 iframe 元素。