ElectronJS无法识别不同X11 DISPLAY值的双显示器问题求助

问题背景 #

我需要实现双显示器场景：弹出登录UI时，一台显示器显示登录界面，另一台显示黑屏。当两台显示器的DISPLAY值均为:0时，Electron调用screen.getAllDisplays()能正常识别两台显示器并启动对应窗口；但当两台显示器DISPLAY值分别为:0和:0.1时，该方法仅返回一台显示器，无法识别另一台。

工作场景代码示例 #

numberOfScreens = screen.getAllDisplays()       // 返回两台显示器信息
numberOfScreens.forEach((display) => {
  console.log(display.bounds.x)                // 两台显示器的X、Y值不同
  console.log(display.bounds.y)
})

异常场景代码示例 #

numberOfScreens = screen.getAllDisplays()  // 仅返回一台显示器，无法识别另一台
numberOfScreens.forEach((display) => {
  console.log(display.bounds.x)          
  console.log(display.bounds.y)
})

解决方案 #

1. 手动遍历系统DISPLAY设备 #

Electron的screen模块在多DISPLAY的X11环境下存在识别限制，可直接通过系统命令或文件读取获取所有可用DISPLAY：

• 方式一：通过xrandr命令解析
  在Electron主进程中执行系统命令获取所有活跃显示器：

  const { execSync } = require('child_process');
  
  try {
    const output = execSync('xrandr --listactivemonitors').toString();
    const displays = output.split('\n')
      .filter(line => line.trim().startsWith('+'))
      .map(line => {
        const [, , pos] = line.trim().split(/\s+/);
        const [x, y] = pos.split('/')[0].split(',').map(Number);
        return { bounds: { x, y } };
      });
    console.log('检测到的显示器:', displays);
    // 针对每个显示器创建对应窗口
  } catch (err) {
    console.error('获取显示器信息失败:', err);
  }
  

• 方式二：读取X11套接字文件
  Linux系统中，X11的DISPLAY对应/tmp/.X11-unix/下的套接字文件，可直接遍历该目录获取所有DISPLAY：

  const fs = require('fs');
  
  const x11SocketDir = '/tmp/.X11-unix/';
  const displays = fs.readdirSync(x11SocketDir)
    .filter(file => file.startsWith('X'))
    .map(file => `:${file.slice(1)}`);
  
  console.log('所有可用DISPLAY:', displays);
  // 为每个DISPLAY创建窗口实例
  

2. 合并多DISPLAY到单个X服务器 #

如果系统允许修改配置，可将:0.1的显示器合并到:0的X服务器中，统一DISPLAY值：

# 先通过xrandr查看显示器名称
xrandr
# 将副显示器添加到主显示器右侧
xrandr --output <副显示器名称> --auto --right-of <主显示器名称>

合并后所有显示器将被同一个X服务器管理，DISPLAY统一为:0，Electron的screen.getAllDisplays()即可正常识别。

3. 升级Electron版本 #

部分旧版本Electron对X11多DISPLAY场景的支持存在缺陷，升级到最新稳定版可能直接解决识别问题。

4. 为不同DISPLAY启动窗口实例 #

如果需要保留独立的DISPLAY，可针对每个DISPLAY单独启动窗口：

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

// 假设已获取到所有DISPLAY列表
const displays = [':0', ':0.1'];

displays.forEach(display => {
  const win = new BrowserWindow({
    show: false,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true
    }
  });
  // 指定窗口绑定的DISPLAY
  process.env.DISPLAY = display;
  win.loadFile(display === ':0' ? 'login.html' : 'black-screen.html');
  win.show();
});

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