如何让浏览器空闲检测兼容动态iframe的鼠标与键盘事件？

我懂你的需求——原来的代码只能监测主页面的鼠标和键盘操作，但动态插入的iframe里的用户行为没被纳入空闲判定，而且你不想依赖任何jQuery空闲插件对吧？没问题，咱们用纯原生JavaScript就能搞定，同时覆盖主页面和所有iframe的活跃事件。

核心思路拆解 #

• 用原生JS替代jQuery的事件绑定，摆脱库依赖
• 统一维护一个空闲计时器，只要主页面或任意iframe有用户操作就重置计时器
• 监听现有iframe和动态插入的iframe，给它们内部绑定鼠标移动、按键事件
• 处理跨域iframe的同源限制问题，避免报错

完整实现代码 #

// 全局变量：记录空闲时长（分钟）、计时器实例
let idleTime = 0;
let idleInterval;

/**
 * 重置空闲计时器：主页面/iframe有活跃操作时调用
 */
function resetIdleTimer() {
    idleTime = 0;
}

/**
 * 空闲计时器递增逻辑
 */
function timerIncrement() {
    idleTime++;
    // 累计空闲超过20分钟时刷新页面
    if (idleTime > 19) {
        window.location.reload();
    }
}

/**
 * 绑定主页面的活跃事件
 */
function bindMainPageEvents() {
    document.addEventListener('mousemove', resetIdleTimer);
    document.addEventListener('keypress', resetIdleTimer);
}

/**
 * 绑定所有iframe的活跃事件（包括动态插入的）
 */
function bindIframeEvents() {
    // 监听DOM插入事件，捕获动态添加的iframe
    document.addEventListener('DOMNodeInserted', function(e) {
        if (e.target.tagName === 'IFRAME') {
            // 等待iframe加载完成后绑定内部事件
            e.target.addEventListener('load', function() {
                try {
                    // 获取iframe的document对象（兼容不同浏览器）
                    const iframeDoc = this.contentDocument || this.contentWindow.document;
                    // 绑定iframe内的鼠标移动、按键事件
                    iframeDoc.addEventListener('mousemove', resetIdleTimer);
                    iframeDoc.addEventListener('keypress', resetIdleTimer);
                } catch (err) {
                    // 跨域iframe受同源策略限制，无法访问内部文档，这里做容错处理
                    console.warn('无法监听跨域iframe的用户行为:', err);
                }
            });
        }
    });

    // 处理页面初始化时已存在的iframe
    const existingIframes = document.querySelectorAll('iframe');
    existingIframes.forEach(iframe => {
        // 绑定iframe加载完成事件
        iframe.addEventListener('load', function() {
            try {
                const iframeDoc = this.contentDocument || this.contentWindow.document;
                iframeDoc.addEventListener('mousemove', resetIdleTimer);
                iframeDoc.addEventListener('keypress', resetIdleTimer);
            } catch (err) {
                console.warn('无法监听跨域iframe的用户行为:', err);
            }
        });

        // 如果iframe已经加载完成，直接绑定事件
        if (iframe.contentWindow && iframe.contentWindow.document.readyState === 'complete') {
            try {
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                iframeDoc.addEventListener('mousemove', resetIdleTimer);
                iframeDoc.addEventListener('keypress', resetIdleTimer);
            } catch (err) {
                console.warn('无法监听跨域iframe的用户行为:', err);
            }
        }
    });
}

/**
 * 初始化空闲检测逻辑
 */
function initIdleDetection() {
    bindMainPageEvents();
    bindIframeEvents();
    // 启动计时器：每分钟递增一次空闲时长
    idleInterval = setInterval(timerIncrement, 60000);
}

// 页面DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', initIdleDetection);

关键注意点 #

• 跨域iframe限制：如果iframe的域名和主页面不同，浏览器的同源策略会阻止我们访问其内部文档，这种情况下无法监听该iframe的用户行为，代码中已经通过try-catch做了容错，避免页面报错。
• 动态iframe兼容：通过DOMNodeInserted事件监听所有新插入的iframe，确保不管什么时候添加的iframe都能被纳入监测范围。
• 原生JS实现：完全不依赖jQuery或任何第三方空闲插件，兼容性覆盖现代主流浏览器。

原问题：将现有一段JavaScript代码可有效捕获浏览器空闲状态，但页面中存在通过JavaScript动态插入的iframe。需将iframe内的鼠标移动、按键操作也判定为活跃行为，且不使用任何jQuery浏览器空闲插件，求补充实现代码。

内容的提问来源于stack exchange，提问作者Vallabha Vamaravelli