Electron页面打开方式

在 ​​Electron​​ 中，默认情况下，网页中的 <a target="_blank"> 链接会在新的 ​​BrowserWindow​​ 中打开，这可能会导致窗口管理混乱。你可以通过以下方法控制链接的打开行为，使其在当前窗口或指定窗口中加载。

​​1. 禁止新窗口打开，强制在当前窗口加载​​

使用 setWindowOpenHandler 拦截新窗口请求，并强制在当前窗口加载：

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

let mainWindow;

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

  mainWindow.loadURL('https://www.xianyu.com');

  // 拦截新窗口打开，强制在当前窗口加载
  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    mainWindow.loadURL(url); // 在当前窗口打开链接
    return { action: 'deny' }; // 阻止默认行为（新窗口）
  });
}

app.whenReady().then(createWindow);

​​2. 在新窗口中打开，但控制窗口属性​​

如果你仍然希望某些链接在新窗口中打开，但想控制窗口大小、位置等：

mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  // 只允许特定域名在新窗口打开
  if (url.startsWith('https://www.xianyu.com')) {
    return { action: 'allow', overrideBrowserWindowOptions: {
      width: 800,
      height: 600,
      webPreferences: { nodeIntegration: false },
    } };
  }
  // 其他链接在当前窗口打开
  mainWindow.loadURL(url);
  return { action: 'deny' };
});

​​3. 使用 shell.openExternal 打开外部浏览器​​

如果希望外部链接（如广告、第三方页面）在默认浏览器中打开：

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

mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  if (!url.startsWith('https://www.xianyu.com')) {
    shell.openExternal(url); // 在系统浏览器中打开
    return { action: 'deny' };
  }
  // 闲鱼链接在当前窗口打开
  mainWindow.loadURL(url);
  return { action: 'deny' };
});

​​4. 监听 new-window 事件（旧版 Electron）​​

在 Electron <5 版本中，可以使用 new-window 事件：

mainWindow.webContents.on('new-window', (event, url) => {
  event.preventDefault(); // 阻止默认行为
  mainWindow.loadURL(url); // 在当前窗口打开
});

​​5. 完整代码示例​​

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

let mainWindow;

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

  mainWindow.loadURL('https://www.xianyu.com');

  // 控制链接打开行为
  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    // 闲鱼内部链接在当前窗口打开
    if (url.startsWith('https://www.xianyu.com')) {
      mainWindow.loadURL(url);
      return { action: 'deny' };
    }
    // 外部链接用浏览器打开
    shell.openExternal(url);
    return { action: 'deny' };
  });
}

app.whenReady().then(createWindow);

​​总结​​

通过以上方法，你可以完全控制 Electron 中网页链接的打开方式，避免窗口泛滥问题。🚀