如何检测JS代码运行环境：浏览器/CEF/Electron？

当然有办法区分啦！作为经常处理这类场景的开发者，我给你分享几个实用的检测思路——这些方法在大多数常规场景下都能准确区分：

1. 检测Electron特有的标识 #

Electron的渲染进程会暴露一些独有的全局对象，我们可以利用这一点来判断：

function isElectron() {
  // 检测Electron专属的process版本信息，或者全局electron对象
  return typeof window !== 'undefined' && 
         (typeof process !== 'undefined' && process.versions?.electron || window?.electron);
}

另外，Electron默认会在window上挂载require方法（如果开启了Node集成），这也是一个判断点——不过要注意，如果用户禁用了Node集成，这个方法就失效了。

2. 识别CEF环境 #

CEF（Chromium Embedded Framework）也有自己的特征：

• 部分CEF衍生框架（比如CefSharp）会暴露window.CefSharp全局对象
• 用户代理字符串中通常会包含CEF或Chromium Embedded Framework关键字
• 原生CEF会提供CefQuery方法用于和宿主通信

对应的检测代码：

function isCEF() {
  const userAgent = navigator.userAgent;
  return userAgent.includes('CEF') || 
         userAgent.includes('Chromium Embedded Framework') || 
         typeof window.CefQuery === 'function';
}

3. 通用嵌入式环境检测 #

如果想一次性覆盖大部分嵌入式浏览器场景，可以把上面的方法结合起来，再加上一些通用特征：

function isEmbeddedBrowser() {
  // 合并Electron、CEF的检测逻辑，再判断是否存在Node.js风格的require
  return isElectron() || isCEF() || (typeof window.require === 'function');
}

注意事项 #

这些方法都不是100%绝对可靠的，比如：

• Electron可以通过配置nodeIntegration: false来隐藏Node相关API，甚至修改用户代理
• CEF也可以被宿主程序定制，移除或修改全局标识
• 有些恶意环境会刻意模拟真实浏览器的特征

但对于绝大多数常规场景来说，这些检测手段已经足够帮你区分真实浏览器和嵌入式工具包环境了。

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