如何用JavaScript检测iframe内用户交互以维持WebApp状态？

针对你的问题，核心是让主窗口感知到iframe内的用户操作，根据iframe与主页面是否同源，有不同的实现方式：

一、同域iframe（iframe内容和主页面同源） #

这种情况操作最简单，直接在iframe内部绑定交互事件，触发主窗口的定时器重置逻辑：

1. 主页面定义重置定时器的核心函数及自身交互监听：

let idleTimer;
const IDLE_TIMEOUT = 30000; // 示例：30秒无操作触发状态重置

function resetIdleTimer() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(() => {
    // 这里写你的状态重置逻辑
    console.log('应用状态已重置');
  }, IDLE_TIMEOUT);
}

// 主页面自身的交互事件绑定
document.addEventListener('mousemove', resetIdleTimer);
document.addEventListener('click', resetIdleTimer);
document.addEventListener('keydown', resetIdleTimer);
document.addEventListener('scroll', resetIdleTimer);

2. 在iframe页面中，绑定相同的交互事件，调用主窗口的重置函数：

const triggerParentReset = () => {
  if (window.parent && typeof window.parent.resetIdleTimer === 'function') {
    window.parent.resetIdleTimer();
  }
};

// iframe内的交互事件监听
document.addEventListener('mousemove', triggerParentReset);
document.addEventListener('click', triggerParentReset);
document.addEventListener('keydown', triggerParentReset);
document.addEventListener('scroll', triggerParentReset);

二、跨域iframe（iframe内容和主页面不同源） #

跨域下无法直接调用主窗口函数，需通过postMessage实现跨域通信：

1. 主页面监听message事件，验证来源后重置定时器：

// 主页面新增跨域消息监听
window.addEventListener('message', (event) => {
  // 严格验证消息来源，避免恶意通信
  if (event.origin === 'https://你的iframe域名.com') {
    if (event.data === 'user-interacted') {
      resetIdleTimer();
    }
  }
});

2. 在iframe页面中，绑定交互事件并向主窗口发送通知：

const notifyParentInteraction = () => {
  // 指定主页面域名，限制消息接收范围
  window.parent.postMessage('user-interacted', 'https://你的主页面域名.com');
};

// iframe内的交互事件监听
document.addEventListener('mousemove', notifyParentInteraction);
document.addEventListener('click', notifyParentInteraction);
document.addEventListener('keydown', notifyParentInteraction);
document.addEventListener('scroll', notifyParentInteraction);

三、无法修改iframe内容的场景 #

如果无权修改iframe内部代码，可以尝试以下两种方案：

方式1：焦点监听+定时检测活跃状态 #

当用户操作iframe时，iframe会获得焦点，结合定时检测document.activeElement来持续重置定时器：

const iframe = document.getElementById('your-iframe');
let activeChecker;

// 监听iframe获得焦点事件
iframe.addEventListener('focus', () => {
  resetIdleTimer();
  // 每秒检测一次，确保iframe内持续操作时定时器不失效
  activeChecker = setInterval(() => {
    if (document.activeElement === iframe) {
      resetIdleTimer();
    } else {
      clearInterval(activeChecker);
    }
  }, 1000);
});

// 监听iframe失去焦点事件，停止检测
iframe.addEventListener('blur', () => {
  clearInterval(activeChecker);
});

方式2：透明遮罩层辅助检测 #

给iframe添加透明遮罩层，用户点击遮罩时触发重置并让iframe获得焦点，iframe获得焦点后隐藏遮罩，同时结合焦点检测持续重置：

<!-- 主页面中iframe的外层结构 -->
<div class="iframe-container">
  <iframe id="your-iframe" src="你的iframe地址"></iframe>
  <div class="iframe-mask"></div>
</div>

.iframe-container {
  position: relative;
}
.iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 10;
}
.iframe-mask.hidden {
  display: none;
}

const iframe = document.getElementById('your-iframe');
const mask = document.querySelector('.iframe-mask');

// 点击遮罩时重置定时器并让iframe获得焦点
mask.addEventListener('click', () => {
  resetIdleTimer();
  iframe.focus();
  mask.classList.add('hidden');
});

// iframe失去焦点时显示遮罩
iframe.addEventListener('blur', () => {
  mask.classList.remove('hidden');
});

// 结合焦点检测持续重置定时器
iframe.addEventListener('focus', () => {
  resetIdleTimer();
  activeChecker = setInterval(() => {
    if (document.activeElement === iframe) {
      resetIdleTimer();
    }
  }, 1000);
});

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