Electron中webContents.executeJavaScript无法调用preload.js定义函数怎么解决？

你开启了contextIsolation: true配置（Electron 12+ 默认为开启状态），该配置下preload脚本的执行上下文和渲染进程的页面上下文是完全隔离的：

• 你在preload.js中直接定义的aa函数仅存在于preload的孤立上下文里
• webContents.executeJavaScript默认执行的是渲染页面的主上下文代码，无法访问到preload孤立上下文内的变量，因此会报aa is not defined错误
• alert是浏览器环境的全局公共API，两个上下文都能访问，因此可以正常执行

推荐保留contextIsolation安全配置，通过Electron提供的contextBridge接口将需要对外暴露的方法挂载到页面上下文的window对象上，操作如下：

第一步：修改preload.js代码 #

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  aa: () => {
    alert(123123123)
    // 有返回值可以直接return
  }
})

第二步：修改主进程调用代码 #

将executeJavaScript执行的代码改为调用暴露在window上的方法即可：

winViewBrowser.webContents.on('dom-ready', () => {
  winViewBrowser.webContents.executeJavaScript('window.electronAPI.aa();', true).then((result) => {
    console.log(result);
  })
});

注意：除非你完全确认你的应用不会加载任何第三方外部内容，否则不推荐将contextIsolation设为false来解决该问题，关闭上下文隔离会带来严重的安全风险。

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