Electron：无法从子窗口中找到 DOM 元素

问题描述

我正在尝试将参数及其属性从主进程发送到渲染器进程，然后将该属性值作为字符串附加到我的 html/子窗口中的 div 上。但是，渲染器进程找不到我指定的 Id 并返回错误：

Cannot read property 'append' of null at EventEmitter.<anonymous>

我以为我可以通过将渲染器文件提供给我的 html 来解决这个错误，但这使得 html 查找也来自该渲染器进程的其他元素，因为我有多个 html 文件连接到它，但它没有无论哪种方式都可以工作。

因此，在此之后，我专门为该 html 窗口创建了另一个 javascript 文件，但该窗口无法接收来自主进程的事件。

这是我当前的代码：

HTML

 <div id="brst_files">
       </div>

<script type="text/javascript" src="./renderer.js">
    </script>
    <script>
    //Open the dialog for burst button
    let brstfile = document.getElementById('brst_add_files')
     brstfile.addEventListener('click',function(event){
      console.log('recieved')
      ipcRenderer.send('brst_add_files')
      console.log('add file')
    })

    ipcRenderer.on('brstfiles',function(event){
    console.log('html recieved')
    document.getElementById('brst_files').append('data.filePath')
    console.log('file path recieved')
  })
    </script>

主要

 //Open burst window dialog menu
 ipcMain.on('brst_add_files',function(event){
  console.log('adding files')
  dialog.showOpenDialog({properties:['openFile','dontAddToRecent','multiSelections'],filters: [
    { name: 'All Files',extensions: ['*'] }

    //Recieve and send the file path data
  ]}).then((data) => {
  console.log(data.filePaths);
  mainWindow.webContents.send('brstfiles',data.filePaths)
  console.log('file path sent')
});
})
}

渲染器

//Burst create window
let brstwindow = new browserWindow({
  width:400,height:415,frame: false,useContentSize: true,backgroundColor: '#00000000',alwaysOnTop: false,transparent: true,resizable: true,webPreferences: {
    nodeIntegration: true,enableRemoteModule: true,useContentSize:true
  }
 });

 brstwindow.loadURL(url.format({
  pathname: path.join(__dirname,'Burstcreate.html'),protocol: 'file',slashes:true
  
})); 
brstwindow.webContents.openDevTools()
brstwindow.hide()

//Open the burst button window
let brstopen = document.getElementById('burstbtn')
brstopen.addEventListener('click',function(event){
brstwindow.show()
})

//Recieve file path from main and append to div
ipcRenderer.on('brstfiles',function(event){
  console.log('html recieved')
  document.getElementById('brst_files').append('data.filePath')//I kNow this just appends a string
  console.log('file path recieved')
})

其他渲染器

const { ipcRenderer,webContents} = require('electron');
const app = require('electron').remote.app;
const electron = require('electron');
const { get } = require('http');
const browserWindow = electron.remote.browserWindow;
const path = require('path');
const { on } = require('process');
const {dialog} = require('electron')
const url = require('url');

//Recieved the file path back from main and appending it to div
ipcRenderer.on('brstfiles',function(event){
    console.log('html recieved')
    document.getElementById('brst_files').append('data.filePath')
    console.log('file path recieved')
  })

所以我的主要问题是：如何从渲染器中找到子窗口中的 DOM 元素？我应该从主流程开始做所有事情吗？

额外问题：如何在渲染进程中从主进程接收参数？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html ipc javascript