iframe内交互three.js模型时无活动状态检测失效问题

嘿，这个问题我做内嵌3D模型页面时也碰到过！核心原因很简单：iframe是独立的浏览上下文，你现在只给主页面绑定了事件监听，iframe内部的鼠标操作、Three.js模型交互事件根本不会自动冒泡到主页面，所以你的resetTimer函数完全没被触发，自然会超时跳转到首页。

下面给你两个针对性的解决方案，根据你的场景选就行：

方案一：在iframe页面（model.html）中主动通知主页面重置计时器 #

这个方案最直接，因为Three.js的交互事件可能不会触发原生DOM事件（比如鼠标在Canvas上拖动时，事件被Three.js的控制器捕获了），所以我们需要在iframe内部同时监听原生事件和Three.js的交互事件，然后主动通知主页面重置计时器。

步骤1：调整主页面JS，确保resetTimer全局可访问 #

你的原有代码已经是全局函数了，这里把事件绑定逻辑抽成复用函数，更清晰：

var timeoutID;

function setup() {
  // 绑定主页面自身的事件
  bindEvents(window);
  startTimer();
}

// 抽离事件绑定逻辑，方便复用
function bindEvents(target) {
  target.addEventListener("mousemove", resetTimer, false);
  target.addEventListener("mousedown", resetTimer, false);
  target.addEventListener("mouseover", resetTimer, false);
  target.addEventListener("mouseout", resetTimer, false);
  target.addEventListener("keypress", resetTimer, false);
  target.addEventListener("DOMMouseScroll", resetTimer, false);
  target.addEventListener("mousewheel", resetTimer, false);
  target.addEventListener("touchmove", resetTimer, false);
  target.addEventListener("MSPointerMove", resetTimer, false);
}

function startTimer() {
  timeoutID = window.setTimeout(goInactive, 5000);
}

function resetTimer(e) {
  window.clearTimeout(timeoutID);
  goActive();
}

function goInactive() {
  window.location = "index.html";
}

function goActive() {
  startTimer();
}

步骤2：在iframe的model.html中添加监听并通知主页面 #

在model.html的JS代码里，添加以下逻辑：

// 通知主页面重置计时器的函数
function notifyParentReset() {
  if (window.parent && typeof window.parent.resetTimer === 'function') {
    window.parent.resetTimer();
  }
}

// 1. 绑定iframe内的原生DOM事件
bindEvents(document);

// 复用事件绑定函数（和主页面一致）
function bindEvents(target) {
  target.addEventListener("mousemove", notifyParentReset, false);
  target.addEventListener("mousedown", notifyParentReset, false);
  target.addEventListener("mouseover", notifyParentReset, false);
  target.addEventListener("mouseout", notifyParentReset, false);
  target.addEventListener("keypress", notifyParentReset, false);
  target.addEventListener("DOMMouseScroll", notifyParentReset, false);
  target.addEventListener("mousewheel", notifyParentReset, false);
  target.addEventListener("touchmove", notifyParentReset, false);
  target.addEventListener("MSPointerMove", notifyParentReset, false);
}

// 2. 监听Three.js的交互事件（关键！）
// 假设你用了OrbitControls控制模型旋转
if (typeof controls !== 'undefined') {
  // 控制器变化、开始/结束交互时都通知主页面
  controls.addEventListener('change', notifyParentReset);
  controls.addEventListener('start', notifyParentReset);
  controls.addEventListener('end', notifyParentReset);
}

// 也可以直接监听Three.js渲染Canvas的事件
if (typeof renderer !== 'undefined') {
  renderer.domElement.addEventListener('mousedown', notifyParentReset);
  renderer.domElement.addEventListener('mousemove', notifyParentReset);
}

方案二：主页面直接监听iframe内部的事件（同域场景适用） #

如果你的主页面和iframe页面是同域名的，也可以直接在主页面中获取iframe的contentWindow，然后给它绑定事件监听：

修改主页面的setup函数：

function setup() {
  // 绑定主页面自身的事件
  bindEvents(window);

  // 获取iframe元素，加载完成后绑定内部事件
  const iframe = document.querySelector('iframe');
  iframe.addEventListener('load', function() {
    const iframeWindow = iframe.contentWindow;
    const iframeDoc = iframeWindow.document;
    // 给iframe的window和document绑定事件
    bindEvents(iframeWindow);
    bindEvents(iframeDoc);
  });

  startTimer();
}

// 复用的绑定事件函数和其他函数不变...

⚠️ 注意：这个方案只适合同域场景，如果iframe的src是其他域名，浏览器的同源策略会阻止你访问iframe的contentWindow，这时候只能用方案一的逻辑。

为什么之前的onload调用setup没用？ #

你之前在iframe的onload里调用setup，只是给主页面绑定了事件，但完全没处理iframe内部的事件，所以iframe里的操作还是不会触发resetTimer，现在的方案补上了这个缺口。

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