在 child 渲染器 electronjs 中访问节点失败

Question

我在打开 child window 时收到一条错误消息，提示“Uncaught ReferenceError: require is not defined”。我正在使用主进程的异步消息在主渲染器脚本按下按钮时为主应用程序 window 创建 child window。我可以访问主渲染器脚本中的节点。我想要 child window 脚本中的一些节点库，但我运行遇到了 nodeIntegration 问题。我在主渲染器和 child 渲染器上将其设置为 true。我可以访问主要 html 渲染脚本中的节点功能，但不能访问 child。我想我可能在为电子应用程序构建错误的东西。这是相关代码：

index.js（发送消息的主渲染器脚本，在按下按钮时调用）

function addImage(){
    ipcRenderer.send('add-image-req', 'testID');
}

main.js 片段

function createWindow () {
  const win = new BrowserWindow({
    width: 1200,
    height: 900,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInSubFrames: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      enableRemoteModule: true
      //preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('./assets/html/index.html')
  win.webContents.openDevTools()

  /*
  var menu = Menu.buildFromTemplate([
      {
          label : 'File',
          submenu : [
              {
                  label : "Exit",
                  click() {
                      app.quit()
                  }
              }
          ]
      }
  ])

  Menu.setApplicationMenu(menu)
  */
  Menu.setApplicationMenu(null)

  ipcMain.on("add-image-req", (event, arg) => {
    console.log(arg);
    const child = new BrowserWindow({
      parent: win,
      nodeIntegration: true,
      contextIsolation: false                             
    })
  
  
    child.loadFile("./assets/html/image.html")
    child.webContents.openDevTools()
  })
}

image.js（image.html 页面的脚本，child）

const path = require("path");

如果我的结构完全不正确，请告诉我。

以最小的再现性进行编辑

为项目创建一个新文件夹并在终端中执行

npm init -y
npm install electron

然后制作以下5个文件：

main.js
index.html
index.js
image.html
image.js

进入创建的 package.json 并将“主”键更改为“main.js”。将“脚本”键更改为“开始”：“电子”。

以下是每个脚本应包含的内容。我将在其中放入最少的代码来重现。

main.js:

const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('path')


function createWindow () {
  const win = new BrowserWindow({
    width: 1200,
    height: 900,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInSubFrames: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      enableRemoteModule: true
      //preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('./index.html')
  win.webContents.openDevTools()

  /*
  var menu = Menu.buildFromTemplate([
      {
          label : 'File',
          submenu : [
              {
                  label : "Exit",
                  click() {
                      app.quit()
                  }
              }
          ]
      }
  ])

  Menu.setApplicationMenu(menu)
  */
  Menu.setApplicationMenu(null)

  ipcMain.on("add-image-req", (event, arg) => {
    console.log(arg);
    const child = new BrowserWindow({
      parent: win,
      nodeIntegration: true,
      contextIsolation: false                             
    })
  
  
    child.loadFile("./image.html")
    child.webContents.openDevTools()
  })
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <button>Click</button>
    <script src="./index.js"></script>
</body>
</html>

index.js:

const { ipcRenderer } = require('electron')

document.querySelector("button").addEventListener('click', () => {
    ipcRenderer.send('add-image-req', 'testID')
})

image.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci impedit voluptatibus numquam consectetur sapiente possimus earum nobis et, molestiae minus ipsam. Dolore doloremque quia et assumenda maiores? Numquam, nostrum.</a>
    <script src="./image.js"></script>
</body>
</html>

image.js:

const path = require("path");

然后尝试运行 npm start，点击按钮时应该会出现错误。

Answer 1

nodeIntegration是webPreferences的子选项，需要这样设置：

const child = new BrowserWindow({
  parent: win,
  webPreferences:  { // <- You need to add this option.
    nodeIntegration: true,
    contextIsolation: false
  }
})

nodeIntegration 和 contextIsolation 应设置在 webPreferences.

内

在 child 渲染器 electronjs 中访问节点失败

Access to node failed in child renderer electronjs

javascript

node.js

electron