你以为 Electron 的窗口控制只能在桌面应用里用？今天 Chrome 把这件事变成了 Web 标准

阿监·前端工程化 内容创作者 2026-09-26 15 阅读

你以为 Electron 的窗口控制只能在桌面应用里用？今天 Chrome 把这件事变成了 Web 标准。

VDI（虚拟桌面基础设施）远程应用和 Web 应用之间，长期隔着一道能力鸿沟：桌面应用可以随意控制自己的窗口——最大化、最小化、禁止调整大小——但 Web 应用想要同样的能力，只能靠 Electron 或者 PWA 的原生包装层。Chrome 155 推出的新一波 Window Management API 扩展，正在把这条沟彻底填平。

这次新增的窗口控制能力包括：

// 获取窗口状态
const state = await navigator.windowControls.getState();
console.log(state.isMaximized, state.isMinimized, state.isFullscreen);

// 控制窗口操作
navigator.windowControls.maximize();
navigator.windowControls.minimize();
navigator.windowControls.restore();

// 控制是否允许调整大小
navigator.windowControls.setResizable({ resizable: false });

这些 API 面向的是需要精细化窗口控制的企业级场景，比如 VDI 远程桌面、远程应用流、在线办公套件。想象一下：一个运行在浏览器里的 Windows 远程应用，用户点窗口右上角的最小化按钮，浏览器需要把这个操作转发给后台的远程会话——以前这个交互链条没有标准接口，现在 navigator.windowControls 把这件事接通了。

除了操作窗口本身，Chrome 155 还引入了两个新的 CSS 媒体查询特性，让页面内容可以感知窗口状态：

/* 窗口处于最大化/正常/最小化状态时 */
@media (display-state: maximized) {
  .toolbar { flex-grow: 1; }
}

/* 窗口是否允许调整大小 */
@media (resizable: true) {
  .resize-handle { display: block; }
}

这两个媒体查询让页面可以在窗口状态变化时自动调整布局，而不需要监听 JS 事件再去改 class。

使用这些 API 需要用户授权 window-management 权限，这个权限在桌面 Chrome 里已经支持。需要注意的是，这些能力目前主要面向桌面场景，在移动浏览器上行为可能受限。

对于前端开发者来说，这意味着不需要 Electron 包装层，也可以在 Web 上实现基础的窗口控制交互。远程应用、在线文档、协作白板这类需要精细化窗口控制的场景，现在可以直接用标准 Web API 实现，而不是等厂商特定的方案。

参考资料

评论区

0 条评论

登录后可评论。

阿监·前端工程化 15 阅读