Electron中在HTML元素内渲染原生应用的可行性咨询

云原生阿岚

2026-5-12

可以实现！在Electron中嵌入原生Windows应用（以Windows Media Player为例）

你想要的效果——把原生应用窗口嵌入Electron的HTML元素中，同时保留Electron界面的其他HTML控件（比如按钮）——完全可以实现。核心思路是利用Windows的Win32 API，将原生应用的窗口设置为Electron主窗口的子窗口，再通过监听DOM元素的位置变化来同步调整原生窗口的尺寸和位置，让它看起来就像是直接渲染在指定的<div>里一样。

实现步骤概述

启动原生应用：用Electron的child_process启动Windows Media Player，获取它的系统窗口句柄。
关联窗口层级：通过Win32 API的SetParent，把原生应用窗口设置为Electron主窗口的子窗口。
美化原生窗口：移除原生窗口的标题栏、边框，让它和Electron界面融为一体。
同步位置尺寸：监听目标DOM元素的位置/大小变化，用Win32 API调整原生窗口的位置，使其匹配DOM元素的区域。
保留交互能力：原生窗口作为子窗口，会直接接收用户的鼠标/键盘输入，完全可以正常操控播放器。

具体代码实现

1. 安装依赖

我们需要用ffi-napi来调用Win32 API，先安装依赖：

npm install ffi-napi ref-napi

2. 主进程代码（main.js）

const { app, BrowserWindow, ipcMain } = require('electron');
const { spawn } = require('child_process');
const ffi = require('ffi-napi');
const ref = require('ref-napi');

// 定义Win32 API函数
const user32 = new ffi.Library('user32', {
  'FindWindowA': ['pointer', ['string', 'string']],
  'SetParent': ['pointer', ['pointer', 'pointer']],
  'SetWindowLongPtrA': ['int64', ['pointer', 'int', 'int64']],
  'SetWindowPos': ['bool', ['pointer', 'pointer', 'int', 'int', 'int', 'int', 'uint']],
});

// Win32 API常量定义
const HWND_TOP = ref.NULL;
const SWP_NOZORDER = 0x0004;
const SWP_NOACTIVATE = 0x0010;
const GWL_STYLE = -16;
const WS_CAPTION = 0x00C00000;
const WS_THICKFRAME = 0x00040000;
const WS_SYSMENU = 0x00080000;

let mainWindow;
let wmpWindowHandle = null;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 生产环境建议用preload脚本替代直接开启nodeIntegration，这里为示例简化
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');

  // 启动Windows Media Player
  const wmpProcess = spawn('wmplayer.exe');

  // 等待WMP启动完成后获取窗口句柄
  setTimeout(() => {
    // 通过窗口类名查找WMP（比标题更可靠，因为标题会随播放内容变化）
    wmpWindowHandle = user32.FindWindowA('WMPlayerApp', null);
    if (!wmpWindowHandle) {
      console.error('无法找到Windows Media Player窗口');
      return;
    }

    // 获取Electron主窗口的原生句柄
    const electronWindowHandle = mainWindow.getNativeWindowHandle();
    // 将WMP窗口设置为Electron窗口的子窗口
    user32.SetParent(wmpWindowHandle, electronWindowHandle);

    // 移除WMP窗口的标题栏、边框、系统菜单
    let windowStyle = user32.SetWindowLongPtrA(wmpWindowHandle, GWL_STYLE, 0);
    windowStyle &= ~(WS_CAPTION | WS_THICKFRAME | WS_SYSMENU);
    user32.SetWindowLongPtrA(wmpWindowHandle, GWL_STYLE, windowStyle);

    // 通知渲染进程更新WMP窗口位置
    mainWindow.webContents.send('sync-wmp-position');
  }, 2000);

  // 监听渲染进程发来的位置更新请求
  ipcMain.on('update-wmp-position', (_, rect) => {
    if (!wmpWindowHandle) return;
    // 调整WMP窗口的位置和大小
    user32.SetWindowPos(
      wmpWindowHandle,
      HWND_TOP,
      rect.left,
      rect.top,
      rect.width,
      rect.height,
      SWP_NOZORDER | SWP_NOACTIVATE
    );
  });

  // 关闭窗口时清理WMP进程
  mainWindow.on('close', () => {
    if (wmpProcess) wmpProcess.kill();
  });
}

app.whenReady().then(createMainWindow);

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

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

3. 渲染进程代码（index.html）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron嵌入WMP示例</title>
  <style>
    body {
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    #wmp-container {
      width: 600px;
      height: 400px;
      border: 2px solid #2c3e50;
      margin: 0 auto 30px;
      position: relative;
    }
    #custom-btn {
      display: block;
      margin: 0 auto;
      padding: 12px 24px;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 用来承载WMP窗口的容器 -->
  <div id="wmp-container"></div>
  <!-- 普通HTML按钮 -->
  <button id="custom-btn">点击我（普通HTML元素）</button>

  <script>
    const { ipcRenderer } = require('electron');
    const container = document.getElementById('wmp-container');

    // 获取容器相对于窗口的位置和尺寸
    function getContainerRect() {
      const rect = container.getBoundingClientRect();
      return {
        left: Math.round(rect.left),
        top: Math.round(rect.top),
        width: Math.round(rect.width),
        height: Math.round(rect.height),
      };
    }

    // 同步WMP窗口位置到容器
    function syncWmpPosition() {
      ipcRenderer.send('update-wmp-position', getContainerRect());
    }

    // 监听窗口 resize 和容器尺寸变化
    window.addEventListener('resize', syncWmpPosition);
    const resizeObserver = new ResizeObserver(syncWmpPosition);
    resizeObserver.observe(container);

    // 响应主进程的初始同步请求
    ipcRenderer.on('sync-wmp-position', syncWmpPosition);

    // 普通按钮的点击事件
    document.getElementById('custom-btn').addEventListener('click', () => {
      alert('这是Electron里的普通HTML按钮，和嵌入的WMP互不干扰！');
    });
  </script>
</body>
</html>

关键注意事项

平台局限性：这个方案仅适用于Windows系统。如果需要支持macOS或Linux，需要分别使用对应平台的系统API（比如macOS的NSView嵌入、Linux的X11窗口管理）。
安全建议：生产环境中不要直接开启nodeIntegration和关闭contextIsolation，应该使用Electron的preload脚本来实现主进程和渲染进程的通信，避免安全风险。
窗口查找可靠性：示例中用窗口类名WMPlayerApp查找WMP，比用窗口标题更可靠（因为标题会随播放内容变化）。如果是其他原生应用，需要先确定它的窗口类名或进程ID来查找句柄。
进程管理：记得在Electron窗口关闭时杀掉原生应用的进程，避免残留后台进程。

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