视频会议开到一半要切出去看文档？浏览器这个 API 把整个页面变成了画中画——Document Picture-in-Picture 完整实战

视频会议开到一半要切出去看文档，普通 PiP 模式只能放视频——现在浏览器把整个页面的控制权还给你了。

Document Picture-in-Picture API 把「画中画」从视频扩展到了任意 HTML 文档。你可以把聊天面板、监控仪表盘、代码编辑器，任何页面内容丢进一个浮动窗口，然后继续在主窗口做其他事情。

区别在哪：video PiP vs Document PiP

传统的 Picture-in-Picture API 只能针对 <video> 元素工作。你调用 video.requestPictureInPicture()，浏览器把那个视频放进一个小窗口。这是专给视频用的。

Document Picture-in-Picture API 不一样。它打开的是一个空白窗口，你可以往里面塞任意 HTML 内容——不只是视频，是整个 DOM。

const pipWindow = await documentPictureInPicture.requestWindow({
  width: 400,
  height: 300
});

// 往里面塞内容
pipWindow.document.body.innerHTML = `
  <div style="padding: 16px; font-family: system-ui;">
    <h2>实时监控</h2>
    <div id="metrics">加载中...</div>
  </div>
`;

这意味着你可以在主页面保持正常工作流的同时，把某个工具面板、文档或者仪表盘单独拎出来悬浮在屏幕上。

典型场景：这些以前做不到

视频会议中的共享文档对照。 你在开会，对方共享了一个文档链接，你要一边看视频会议一边参照文档。以前要么两个窗口来回切，要么把文档打印出来。现在可以把文档放进 PiP 窗口，会议窗口保持全屏，文档在旁边悬浮着看。

编辑代码时对照文档。 你在写代码，要同时看 API 文档。以前需要分屏或者开两个浏览器窗口，现在可以把文档页面丢进 PiP，代码窗口保持最大，文档在旁边小窗口跟着你滚动。

实时数据监控面板。 你的页面有个监控指标要持续关注，但同时要做其他事情。可以用 Document PiP 把那个指标面板单独拎出来，浮动在所有窗口之上，不用专门切过去看。

// 把页面里的 #monitoring-panel 丢进 PiP 窗口
const pipWindow = await documentPictureInPicture.requestWindow();
const panel = document.querySelector("#monitoring-panel");
pipWindow.document.body.appendChild(panel.cloneNode(true));

两个窗口之间怎么通信

Document PiP 打开的是独立的窗口，有独立的 document。但它和主页面共享同一个 JavaScript 执行上下文——同一个 EventLoop、同一个全局变量空间。这意味着你可以直接在两个窗口之间发消息。

// 主窗口发送消息
const pipWindow = documentPictureInPicture.window;
pipWindow.postMessage({ type: "update", value: 42 }, "*");

// 主窗口监听 PiP 窗口发回来的消息
window.addEventListener("message", (event) => {
  if (event.data.type === "action") {
    handleAction(event.data.payload);
  }
});

同时，PiP 窗口可以通过 window.opener 访问主页面的 DOM。这在某些场景下很有用，比如在 PiP 窗口里放一个按钮，点击后操作主页面的内容。

样式和用户体验细节

Document PiP 窗口默认样式是最小化的浏览器窗口——有标题栏、可拖动、可关闭。你可以设置 width 和 height 来控制初始尺寸，但用户可以自己拖动调整。

需要注意的点：

关闭行为。 用户可以手动关闭 PiP 窗口，也可以在代码里调用 documentPictureInPicture.close()。关闭后，被移动到 PiP 窗口的 DOM 元素不会自动回到原位，需要自己处理。

样式隔离。 PiP 窗口里的样式默认独立，但你可以把主页面的 CSS 变量和部分样式传进去：

// 保留 CSS 变量
pipWindow.document.body.style.setProperty(
  "--brand-color",
  getComputedStyle(document.documentElement)
    .getPropertyValue("--brand-color")
);

Z-index 和焦点。 PiP 窗口始终在其他窗口之上，这是浏览器级别的保证，不需要自己写 z-index。但焦点管理需要自己处理——PiP 窗口获得焦点时，主页面不自动失焦，反之亦然。

浏览器支持与降级

Chrome 116+、Edge 116+、Opera 102+ 支持 Document Picture-in-Picture API。Firefox 和 Safari 暂时不支持。

降级方案是检测特性是否可用：

if ("documentPictureInPicture" in window) {
  // 支持 Document PiP
  openDocumentPiP();
} else {
  // 降级到传统 video PiP 或者提示用户用 Chrome/Edge
  showFallbackMessage();
}

下一步

如果你的产品有「用户需要同时看两个内容」的使用场景，Document PiP 是一个值得评估的原生方案。典型场景包括：在线文档的多窗口对照、实时数据监控面板的悬浮查看、远程会议中的资料共享。不需要 Electron，不需要自己实现窗口管理，浏览器原生支持，零依赖。