MutationObserver 拦截修改所有元素的链接-Go服务器开发

MutationObserver 是一个用于监听 DOM 变化的 API，可以用来观察元素的插入、删除和属性的变化。如果你想拦截所有元素链接（如 <a> 标签）的修改，你可以使用 MutationObserver 来观察 DOM 中的节点变更，并在这些变更发生时执行相应的逻辑。

下面是一个示例，展示如何使用 MutationObserver 拦截并修改所有 <a> 元素链接：

// 创建一个 MutationObserver 实例
const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
        // 如果添加了新节点
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                // 确保它是一个元素节点
                if (node.nodeType === Node.ELEMENT_NODE) {
                    // 检查新的子节点中是否有 <a> 标签
                    const links = node.getElementsByTagName('a');
                    for (let link of links) {
                        interceptLink(link);
                    }
                }
            });
        }

        // 如果修改了属性（例如 href）
        if (mutation.type === 'attributes' && mutation.attributeName === 'href') {
            interceptLink(mutation.target);
        }
    }
});

// 定义拦截链接的方法
function interceptLink(link) {
    const originalHref = link.href;

    // 修改链接（例如，将所有链接都重定向到某个 URL）
    link.href = 'https://example.com'; 

    console.log(`Intercepted a link: ${originalHref} -> ${link.href}`);
}

// 配置观察者选项
const config = { childList: true, subtree: true, attributes: true };

// 开始观察整个文档
observer.observe(document.body, config);

// 还可以处理现有的 <a> 标签
const existingLinks = document.getElementsByTagName('a');
for (let link of existingLinks) {
    interceptLink(link);
}

说明

创建 MutationObserver：通过传入回调函数来创建 MutationObserver 实例，该回调函数会在观察到变化时被调用。
配置选项：
- childList: 观察子节点的添加或移除。
- subtree: 包括整个 DOM 树中的所有后代。
- attributes: 观察属性的变化，这里我们特别关注 href 属性。
拦截链接：定义了 interceptLink 函数，用于获取原始链接并对其进行修改。这里将每个 <a> 标签的 href 属性设置为固定的网址，但你可以根据需要进行不同的处理。
处理现有链接：最后一段代码遍历已有的 <a> 元素并进行初步拦截，以确保在页面加载时也能处理这些元素。