从A标签跳转后JS失效的坑和填坑方法

<!-- 文章列表页 -->
<a href="/article/spring-boot-guide" rel="external nofollow"  rel="external nofollow" >Spring Boot入门指南</a>
<a href="/article/vue3-composition-api" rel="external nofollow" >Vue3 Composition API详解</a>

<a href="/article/spring-boot-guide" rel="external nofollow"  rel="external nofollow"  target="_self">Spring Boot入门指南</a>

<!-- 简单，但有点丑，而且总觉得治标不治本 -->
<a href="/article/123" rel="external nofollow"  target="_self">查看文章</a>

// 以前的写法，问题多多
document.addEventListener('DOMContentLoaded', function() {
    initLightbox();  // 有时候DOM还没完全准备好
    initCopyButton(); // 特别是Thymeleaf动态渲染的内容
});

// 现在的写法，更稳健
function initPage() {
    // 先检查关键元素是否存在
    const articleContent = document.querySelector('.article-content');
    if (!articleContent) {
        // 如果元素还不存在，等100毫秒再试
        setTimeout(initPage, 100);
        return;
    }
    
    // 元素存在了，开始初始化
    initLightbox();
    initCopyButton();
    initCommentSection();
}

// 多重保险：多个事件都触发初始化
window.addEventListener('DOMContentLoaded', initPage);
window.addEventListener('load', initPage);

// 处理浏览器前进/后退的情况
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {  // 页面是从缓存加载的
        initPage();
    }
});

// 页面初始化管理器
const PageManager = {
    initialized: false,
    
    // 需要初始化的功能列表
    features: [
        { name: 'lightbox', init: initLightbox, selector: '.article-image' },
        { name: 'copyBtn', init: initCopyButtons, selector: 'pre code' },
        { name: 'comments', init: initComments, selector: '#comment-section' }
    ],
    
    // 初始化所有功能
    async initialize() {
        if (this.initialized) return;
        
        console.log('开始初始化页面功能...');
        
        for (const feature of this.features) {
            // 等待所需元素出现
            await this.waitForElement(feature.selector);
            // 执行初始化
            feature.init();
            console.log(`✅ ${feature.name} 初始化完成`);
        }
        
        this.initialized = true;
        console.log('🎉 所有页面功能初始化完成！');
    },
    
    // 等待元素出现
    waitForElement(selector, timeout = 3000) {
        return new Promise((resolve, reject) => {
            const startTime = Date.now();
            
            const check = () => {
                // 元素已经存在
                if (document.querySelector(selector)) {
                    resolve();
                    return;
                }
                
                // 超时检查
                if (Date.now() - startTime > timeout) {
                    console.warn(`⚠️ 等待 ${selector} 超时`);
                    reject(new Error('等待元素超时'));
                    return;
                }
                
                // 继续等待
                setTimeout(check, 100);
            };
            
            check();
        });
    },
    
    // 重置状态（用于页面重新加载时）
    reset() {
        this.initialized = false;
    }
};

// 页面显示时初始化
window.addEventListener('pageshow', () => {
    PageManager.reset();
    PageManager.initialize();
});

// 也监听传统的加载事件
window.addEventListener('load', () => {
    PageManager.initialize();
});