如何让所有Electron渲染器访问preload脚本的openFile()函数？

我想让主渲染器打开一个用于显示文件（如图像或视频）的第二个渲染器。我在renderer.js里实现了对应的openFile()函数，调用完全正常，但在specific.js中调用该函数时，却抛出“Cannot read property of undefined, 'openFile()'”错误。

附上相关代码：

//main.js
const { app, BroswerWindow, ipcMain, dialog } = require('electron')
const path = require('path')

async function handleFileOpen() {
    const {canceled, filePath} = await dialog.showOpenDialog()
    if(canceled) return

    let fullPath = path.resolve(filePaths[0])
    let name = path.basename(fullPath)
    let extension = path.extname(name)

    return {
        filePath: fullPath.
        name: name,
        extension: extension
    }
}

const createWindow = () => {
    //created the window with preload.js as the preload under webPreferences
}

app.whenRead().then(() => {
    ipcMain.handle('dialog:openFile', handleFileOpen)
    //other ipc communications not used in this example

    createWindow()
})

//preload.js
const {contextBridge, ipcRenderer} = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    openFile: () => ipcRenderer.invoke('dialog:openFile')
    //other ipc references similar to the one above
})

specific.js与main.js、preload.js、renderer.js处于同一目录，且被同目录下的HTML文件通过script标签引用。openFile()函数的代码修改自Electron官方文档的IPC双向通信示例。我了解contextBridge.exposeInIsolatedWorld()函数，但找不到获取worldId的方法。

请问如何让specific.js能够使用openFile()函数？

1. 先修正main.js中的语法错误 #

你的main.js存在几处拼写和语法错误，会直接导致IPC通信失败，进而让electronAPI无法正常暴露：

• BroswerWindow → 正确拼写为BrowserWindow
• app.whenRead() → 正确方法为app.whenReady()
• handleFileOpen函数里的filePaths[0] → 解构得到的是filePath，而非filePaths
• 返回对象中fullPath.多了一个点 → 改为fullPath,

修正后的main.js关键片段：

//main.js
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
// ...

async function handleFileOpen() {
    const {canceled, filePath} = await dialog.showOpenDialog()
    if(canceled) return

    let fullPath = path.resolve(filePath)
    let name = path.basename(fullPath)
    let extension = path.extname(name)

    return {
        filePath: fullPath,
        name: name,
        extension: extension
    }
}

// ...

app.whenReady().then(() => {
    ipcMain.handle('dialog:openFile', handleFileOpen)
    createWindow()
})

2. 确保specific.js能访问到暴露的electronAPI #

contextBridge.exposeInMainWorld会把API暴露到**主世界（main world）**的window对象上，只要specific.js在主世界上下文加载，就能直接通过window.electronAPI.openFile()调用。需要检查两点：

• 确认窗口的webPreferences.preload已正确配置preload.js路径，比如：

  const createWindow = () => {
      const mainWindow = new BrowserWindow({
          webPreferences: {
              preload: path.join(__dirname, 'preload.js')
          }
      })
      // ...
  }
  

• 在HTML中，确保specific.js的调用逻辑在DOM和electronAPI加载完成后执行，可通过DOMContentLoaded事件包裹：

  // specific.js
  document.addEventListener('DOMContentLoaded', async () => {
      try {
          const fileInfo = await window.electronAPI.openFile()
          if (fileInfo) {
              // 处理文件信息，比如打开第二个渲染器窗口
              console.log(fileInfo)
          }
      } catch (err) {
          console.error('调用openFile失败:', err)
      }
  })
  

3. 关于exposeInIsolatedWorld的说明 #

只有当specific.js在隔离世界运行（如部分框架的沙箱环境）时，才需要使用exposeInIsolatedWorld。worldId可自定义（比如100），但普通script标签加载的JS默认在主世界，优先使用主世界暴露方式即可，无需额外处理隔离世界。

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