Electron如何实现切换标签页时暂停当前页面、切回后恢复运行

方案1：使用原生后台节流API（推荐，适配Youtube等第三方站点） #

该方案为Electron内置能力，无需修改嵌入页面的代码，效果和手机应用后台暂停逻辑完全一致：

• 核心API为webContents.setBackgroundThrottling()，设置为true时，对应页面切到后台后会自动暂停媒体播放、节流JS定时器执行，切回前台时自动恢复所有运行逻辑。
• 示例实现代码：

// 标签切换回调，activeTabId为新激活标签ID，previousTabId为切走的旧标签ID
function handleTabSwitch(activeTabId, previousTabId) {
  // 给切到后台的页面开启后台节流
  const prevWebContents = getWebContentsByTabId(previousTabId)
  if (prevWebContents && !prevWebContents.isDestroyed()) {
    prevWebContents.setBackgroundThrottling(true)
  }
  // 给新激活的页面关闭后台节流，恢复正常运行
  const activeWebContents = getWebContentsByTabId(activeTabId)
  if (activeWebContents && !activeWebContents.isDestroyed()) {
    activeWebContents.setBackgroundThrottling(false)
  }
}

如果你使用<webview>标签承载页面，直接给标签添加backgroundthrottling="true"属性即可生效，无需额外调用API。
Electron 9及以上版本默认开启后台节流能力，若默认不生效可通过上述代码手动控制。

方案2：自定义控制逻辑（适合需要精细化管控的场景） #

如果需要自定义暂停/恢复的规则，可通过IPC通信实现主动控制：

1. 主进程监听标签切换事件，分别给后台/前台页面发送对应事件：

// 主进程逻辑
const { ipcMain } = require('electron')
function handleTabSwitch(activeTabId, previousTabId) {
  const prevWC = getWebContentsByTabId(previousTabId)
  prevWC?.send('app-page-background')
  const activeWC = getWebContentsByTabId(activeTabId)
  activeWC?.send('app-page-foreground')
}

2. 在预加载脚本中监听事件，执行对应操作，第三方站点也可通过该方式注入控制逻辑：

// 预加载脚本逻辑
const { ipcRenderer } = require('electron')
// 切到后台时触发
ipcRenderer.on('app-page-background', () => {
  // 暂停所有视频播放
  document.querySelectorAll('video').forEach(v => v.pause())
  // 可扩展暂停其他自定义逻辑，比如停止定时器、暂停画布渲染等
})
// 切回前台时触发
ipcRenderer.on('app-page-foreground', () => {
  // 恢复视频播放
  document.querySelectorAll('video').forEach(v => v.play())
  // 可扩展恢复其他自定义逻辑
})

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