Forge Viewer后台运行时窗口resize报错，如何阻止其resize调用？

这个问题我之前也碰到过——当Viewer实例的容器不在当前渲染页面（比如被隐藏或者移出DOM树）时，浏览器会出于资源优化的目的回收WebGL上下文相关的资源，此时触发resize方法就会因为访问已失效的__webglFramebuffer而抛出错误。要解决这个问题，核心是控制Viewer的resize方法仅在容器可见时执行，同时保留实例的后台加载状态，下面给你几个可行的方案：

方案1：重写Resize方法，添加可见性判断 #

最简单的方式是保存Viewer原始的resize方法，然后重写它，只有当容器可见时才执行原逻辑：

// 保存Viewer原生的resize方法
const originalResize = viewer.resize;

// 重写resize方法，加入可见性校验
viewer.resize = function() {
  const container = this.container;
  // 检查容器是否处于可见状态（未被隐藏且在DOM树中）
  const isContainerVisible = container.offsetParent !== null && 
                            getComputedStyle(container).display !== 'none';
  
  if (isContainerVisible) {
    // 容器可见时执行原生resize逻辑
    originalResize.call(this);
  }
};

这种方式不需要修改事件监听，只是在resize触发时做一层拦截。当你把Viewer容器重新显示到页面时，只需要手动调用一次viewer.resize()就能让它适配当前窗口大小。

方案2：手动管理Window Resize事件监听 #

Viewer默认会自动绑定window.resize事件到自身的resize方法，我们可以移除这个默认监听，然后自己控制何时响应resize：

// 移除Viewer默认绑定的window resize监听
window.removeEventListener('resize', viewer.resize);

// 自定义resize处理函数
let customResizeHandler = () => {
  viewer.resize();
};

// 当Viewer容器变为可见时，添加自定义resize监听
function enableViewerResize() {
  window.addEventListener('resize', customResizeHandler);
  // 手动触发一次resize，确保显示正常
  viewer.resize();
}

// 当Viewer容器隐藏到后台时，移除resize监听
function disableViewerResize() {
  window.removeEventListener('resize', customResizeHandler);
}

你可以在路由切换或者容器显示/隐藏的钩子函数里，调用enableViewerResize()或disableViewerResize()来控制resize的响应时机。

额外注意事项 #

• 当Viewer从后台切换回前台可见状态时，一定要手动调用一次viewer.resize()，确保画布能正确适配当前窗口尺寸。
• 如果你需要Viewer在后台持续加载模型，不要调用viewer.pause()（这个方法会暂停加载和渲染），保持实例正常运行即可，上述方案不会影响模型的后台加载进程。

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