Electron中链接打开新窗口时，如何自定义BrowserWindow属性？

要让主窗口内的a标签打开新窗口时使用指定的自定义属性，需通过Electron的webContents监听new-window事件拦截默认行为，手动创建符合配置的BrowserWindow，具体实现如下：

核心实现思路 #

• 拦截新窗口请求：主窗口的webContents会在页面内链接尝试打开新窗口时触发new-window事件，通过该事件接管窗口创建逻辑
• 取消默认行为：调用事件对象的preventDefault()方法，阻止Electron自动创建默认配置的窗口
• 手动创建自定义窗口：在事件回调中使用你需要的配置项实例化BrowserWindow，并加载目标URL

完整代码示例 #

const { app, BrowserWindow } = require('electron');

let mainWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  mainWindow.loadURL('你的主窗口目标URL');

  // 监听并处理新窗口请求
  mainWindow.webContents.on('new-window', (event, url) => {
    event.preventDefault();
    
    // 自定义窗口配置，可根据需求动态调整参数
    const width = 600;
    const height = 400;
    const customWindow = new BrowserWindow({
      width: width,
      show: true,
      height: height,
      frame: false,
      transparent: true,
      webPreferences: {
        nodeIntegration: false,
        contextIsolation: true
      }
    });

    customWindow.loadURL(url);
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(createMainWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

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

额外说明 #

• 如果需要针对不同a标签设置差异化窗口属性，可以通过事件对象的frameName参数（对应a标签的target属性）或解析URL来区分，动态调整BrowserWindow的配置
• 保持webPreferences的安全配置，避免开启不必要的权限，降低安全风险

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