从Electron版本12.0.1开始， BrowserWindow 默认的 webPreferences 配置里 contextIsolation 的默认值从 false 改成 true 了。先看看这个参数的描述：

是否在独立 JavaScript 环境中运行 Electron API和指定的 preload 脚本. 默认为 true 。 preload 脚本所运行的上下文环境只能访问其自身专用的 document 和 global window ，其自身一系列内置的JavaScript (Array, Object, JSON等等) 也是如此，这些对于已加载的内容都是不可见的。 Electron API 将只在 preload 脚本中可用，在已加载页面中不可用。 这个选项应被用于加载可能不被信任的远程内容时来确保加载的内容无法篡改 preload 脚本和任何正在使用的Electron API。 该选项使用的是与Chrome内容脚本相同的技术。 你可以在开发者工具Console选项卡内顶部组合框中选择 'Electron Isolated Context'条目来访问这个上下文。

把文档里面翻译成中文的内容适当改回来之后，应该容易理解吧？就是 contextIsolation = true 时你预加载的 preload 脚本和窗口加载的第三方网站内容是 两个隔离的 window 对象 ， preload 脚本没办法访问第三方网站页面里的全局 window 对象！

当然这个修改对 <webview> 标签也是生效的，但因为Eelecton本身不鼓励使用 <webview> 标签的关系，文档里面没有明显的提示。如果你也遇到升级Electron版本后 <webview> 标签用的 preload 读取不到第三方页面的全局 window 对象的问题。可以在 <webview> 标签增加上 webpreferences 这个属性：

  <webview id="viewFrame" ref="webview" :src="pageUrl" :preload="preload" :useragent="userAgent" :partition="partition"></webview>
  <!-- 改成 -->
  <webview id="viewFrame" ref="webview" :src="pageUrl" :preload="preload" :useragent="userAgent" :partition="partition" webpreferences="allowRunningInsecureContent, contextIsolation=0" disablewebsecurity></webview>

这样旧版的 preload 脚本就能正常的在 <webview> 里面执行了！

标签: Javascript , Electron , Nodejs