在Electronj中找到多个窗口，该窗口具有相同的浏览器实例以显示不同的结果

Question

例如：

main窗：选择A，B，C，D

在a

上单击

新窗口1弹出，显示A

的数据 by上的单击

新窗口2弹出，显示B。新窗口1显示B.

的数据。 点击c

新窗口3弹出，显示C的数据。新窗口1＆2显示了C.

的数据。 我认为这个问题与BrowserWindow实例有关，但是我不太确定如何修复它，因为我不知道将打开多少个新窗口。是否有一种方法可以在每个实例的时间点“冻结”数据？ i包括我的渲染器和main.js的代码。数据将从渲染器（索引）传递到MAIN，然后传递给渲染器（仪器）

main.js

// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 1000,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  ipcMain.on('open-instrument-window', (event, instrument) => {
    openNewInstrumentWindow()
  })


  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
const openNewInstrumentWindow = () => {
  const instrumentWindow = new BrowserWindow({
    width: 1000,
    height: 1000,
    title: 'Instrument details',
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
  instrumentWindow.loadFile('instrument.html')
  instrumentWindow.webContents.openDevTools()
// this is where the data is send over to the renderer instrument
  ipcMain.on('a', (event, payload) => {
    instrumentWindow.webContents.send('your-relayed-message', payload);
  });
}

这是我的渲染器索引代码。我提取了相关部分。 ipcrenderer被两次使用，首先要打开新窗口，其次是将数据发送到渲染器仪器。

const searchResults = document.getElementsByClassName('search-result');
        for (let i = 0; i < searchResults.length; i++) {
            searchResults[i].onclick = () => {
                ipcRenderer.send('open-instrument-window')
                ipcRenderer.send('a', instruments[i]);
            }
        }

这是我的渲染器仪器代码。

const getInstrumentDetail = (exchange) => {
    axios.get(`http://url${exchange}`)
        .then(response => {

            let instrument = response.data;
            document.getElementById('instrument-name').innerHTML = instrument.name;
        })
}
ipcRenderer.on('your-relayed-message', (event, payload) => {
    getInstrumentDetail(payload['exchange']);
});

对我指向正确方向的任何提示或指导。

如果有人正在寻找一个简化多窗口（React）应用程序过程的模块；需要一些类似的尺度。我刚刚发布了一个模块，简化了打开和关闭电子窗口的过程。目前仅支持React，但可以轻松地用作其他任何东西的基础。

https：//github.com/gridminder/electron-react-window