it之家评论区显示图片-优化版

it之家评论区自动显示图片，无需跳转到手机版
目前为 2024-10-30 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name        it之家评论区显示图片-优化版
// @namespace   https://github.com/daimiaopeng
// @version     1.0
// @description it之家评论区自动显示图片，无需跳转到手机版
// @author      daimiaopeng
// @match       https://*.ithome.com/*
// @icon        https://img.ithome.com/img/soft/ithome.svg
// ==/UserScript==

(function() {
    'use strict';

    // 监听DOM节点的变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                // 处理新添加的节点
                handleNewNodes(mutation.addedNodes);
            }
        });
    });

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

    // 开始观察页面的根节点
    observer.observe(document.body, config);

    function handleNewNodes(nodes) {
        nodes.forEach((node) => {
            if (node.nodeType === Node.ELEMENT_NODE) {
                if (node.matches('.post-img-list.c-1')) {
                    decodeAndDisplayImage(node);
                }
                // 递归处理子节点
                node.querySelectorAll('.post-img-list.c-1').forEach((childNode) => {
                    decodeAndDisplayImage(childNode);
                });
            }
        });
    }

    function decodeAndDisplayImage(node) {
        const span = node.querySelector('span.img-placeholder');
        if (span) {
            const dataS = span.getAttribute('data-s');
            if (dataS) {
                const decodedUrl = atob(dataS);

                // 创建链接和图片元素
                const a = document.createElement('a');
                a.href = decodedUrl; // 设置链接地址
                a.target = '_blank'; // 在新页面打开

                const img = document.createElement('img');
                img.src = decodedUrl;
                img.style.width = '100px'; // 设置图片宽度
                img.style.height = '100px'; // 设置图片高度

                // 清空span内容并添加链接和图片
                span.innerHTML = '';
                a.appendChild(img);
                span.appendChild(a);
            }
        }
    }

    // 初始化时处理已有的节点
    document.querySelectorAll('.post-img-list.c-1').forEach((node) => {
        decodeAndDisplayImage(node);
    });
})();
欢迎访问Greasy Fork镜像
