Electron JS弹窗窗口按钮无法点击的问题解决

问题场景 #

主页面按钮功能正常，点击可打开弹窗，但弹窗内的按钮无法绑定点击事件，报错：

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at HTMLDocument.<anonymous>

现有代码 #

main.js（主进程代码） #

// to open popup window
ipcMain.on('open-popup', (event) => {
   popupWindow = new BrowserWindow({ width: 500, height: 400 });
   popupWindow.loadFile('renderer/popup.html');
});

renderer.js（主页面渲染脚本） #

const { ipcRenderer } = require('electron');

document.addEventListener('DOMContentLoaded', () => {
    // mainbutton
    const mainButton = document.getElementById('main');
    mainButton.addEventListener('click', async () => {
        console.log("Clicked main button!!");
        ipcRenderer.send('open-popup');
    });
    const popupButton = document.getElementById('popup');
    popupButton.addEventListener('click', () => {
         console.log("Clicked popup button in popup window!!");
    });
});

问题原因 #

当前的renderer.js是主页面的渲染脚本，弹窗窗口是独立的BrowserWindow实例，它的DOM环境和主页面完全分离。主页面的脚本里尝试获取弹窗的按钮元素，自然会得到null——因为主页面的DOM中根本不存在这个按钮。

解决步骤 #

• 为弹窗单独创建渲染脚本
  在renderer目录下新建popup-renderer.js，专门处理弹窗的交互逻辑：

  document.addEventListener('DOMContentLoaded', () => {
      const popupButton = document.getElementById('popup');
      popupButton.addEventListener('click', () => {
          console.log("Clicked popup button in popup window!!");
      });
  });
  

• 在popup.html中引入该脚本
  修改popup.html，在</body>标签前添加脚本引入：

  <script src="./popup-renderer.js"></script>
  

• 配置弹窗的Node.js API访问（按需添加）
  如果弹窗需要使用ipcRenderer这类Node.js API，创建BrowserWindow时需开启对应权限：

  ipcMain.on('open-popup', (event) => {
      popupWindow = new BrowserWindow({ 
          width: 500, 
          height: 400,
          webPreferences: {
              nodeIntegration: true,
              contextIsolation: false
          }
      });
      popupWindow.loadFile('renderer/popup.html');
  });
  

  注：Electron新版本更推荐用预加载脚本（preload）实现安全API访问，若仅需基础按钮点击，上述配置即可满足需求。

验证 #

重启Electron应用，打开弹窗后点击按钮，控制台将正常输出日志，不再触发报错。

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