ElectronJS WebView应用中，如何让target="_blank"链接使用相同自定义User Agent打开新窗口？

嘿，这个问题我之前做Electron项目时也踩过坑——默认情况下，Electron处理带target="_blank"的链接时，会直接新开一个不带原有WebView配置的窗口/标签页，自然也就不会继承自定义UA了。下面是几个经过实践验证的解决思路，你可以根据自己的应用场景选择：

思路1：拦截new-window事件，手动创建带UA的窗口/标签页 #

这是最常用、最灵活的方案，不管你是用多窗口还是标签页模式都适用。核心是监听WebView的new-window事件，阻止默认行为后，手动创建带有自定义UA的新窗口或WebView元素。

代码示例（渲染进程中） #

// 获取页面中的WebView元素
const webview = document.querySelector('webview');

webview.addEventListener('new-window', (event) => {
  // 阻止Electron的默认新开窗口行为
  event.preventDefault();

  // 方案A：新开一个BrowserWindow，继承原WebView的UA
  const { BrowserWindow } = require('electron').remote;
  const newWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      userAgent: webview.getWebContents().userAgent, // 直接复用原UA
      enableRemoteModule: true, // Electron 14+ 需要手动开启这个配置
      contextIsolation: false // 如果需要使用remote模块的话
    }
  });
  newWindow.loadURL(event.url);

  // ---- 或者方案B：如果是标签页模式，动态创建新的WebView ----
  // const newWebview = document.createElement('webview');
  // newWebview.src = event.url;
  // newWebview.setAttribute('useragent', webview.getAttribute('useragent'));
  // // 把新WebView添加到你的标签页容器中
  // document.getElementById('tab-container').appendChild(newWebview);
});

思路2：全局设置默认User Agent #

如果你的整个应用所有窗口/WebView都需要使用同一个自定义UA，那直接在主进程全局设置会更省事，所有新开的窗口都会自动继承这个UA。

代码示例（主进程中） #

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

app.on('ready', () => {
  // 设置全局默认User Agent
  app.userAgentFallback = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) MyCustomApp/1.0.0';

  // 创建主窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');
});

思路3：开启nativeWindowOpen并自定义窗口创建逻辑 #

如果你能控制WebView加载的网页代码，可以开启WebView的nativeWindowOpen配置，然后通过监听主进程的will-create-window事件来指定UA。

步骤1：配置WebView的webpreferences #

<webview 
  src="https://your-web-app.com" 
  webpreferences="nativeWindowOpen=true" 
  useragent="你的自定义UA字符串"
></webview>

步骤2：在主进程监听will-create-window事件 #

// 主进程中
const { BrowserWindow } = require('electron');

// 假设主窗口已经创建
const mainWindow = BrowserWindow.getAllWindows()[0];

mainWindow.webContents.on('will-create-window', (event, newWebContents, details) => {
  // 给新窗口的WebContents设置自定义UA
  newWebContents.userAgent = mainWindow.webContents.userAgent;
});

注意事项 #

• 如果你使用Electron 14及以上版本，remote模块默认是禁用的，建议改用IPC通信（ipcRenderer和ipcMain）来通知主进程创建窗口，这样更安全。
• 如果不同WebView需要不同的UA，那全局设置的方案就不适用，优先选择思路1。

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