document picture-in-picture api 不支持直接挂载主页面 dom 节点，必须在独立的 documentpictureinpicture.window 中新建并管理全部内容，通过 postmessage 通信，且仅 chromium 114+ 支持。
Document Picture-in-Picture API 本身不支持直接挂载 DOM 节点
Document Picture-in-Picture（简称 Document PiP）不是传统意义上的“悬浮窗容器”，它只提供一个独立的 Document 上下文（即一个极简的 iframe-like 环境），你无法用 appendChild() 或 innerHTML 把现有页面的 DOM 元素直接塞进去。它要求你**在 PiP 窗口中自己创建并管理全部内容**——本质是新开一个轻量级文档，而非复用主页面 DOM。
常见误解是以为能像 Electron 的 BrowserWindow 或 Chrome 扩展的 popup 那样“注入已有节点”，实际做不到。错误现象包括：TypeError: Cannot assign to read only property 'ownerDocument' 或元素渲染为空白，因为主文档节点无法跨上下文迁移。
必须用 documentPictureInPicture.window 创建新 DOM
一旦进入 PiP 模式，系统会返回一个独立的 Window 对象（通过 documentPictureInPicture.window 访问），你需要在这个新窗口里手动构建 UI：
- 调用
documentPictureInPicture.window.document.body.innerHTML = '...'是最简方式，但仅适合静态内容 - 更健壮的做法是用
documentPictureInPicture.window.document.createElement()创建元素，再设置样式、事件 - 注意：这个
window对象没有location、history、fetch（部分浏览器限制），且默认无 CSS 样式表，需内联或动态注入<style></style> - 所有交互逻辑（如按钮点击）必须绑定到该窗口的
document上，不能依赖主页面变量或闭包 —— 它们不在同一执行上下文
示例（初始化后添加按钮）：
const pipWindow = documentPictureInPicture.window;
const btn = pipWindow.document.createElement('button');
btn.textContent = 'Close';
btn.onclick = () => pipWindow.close(); // 注意：调用的是 pipWindow 自身的 close
pipWindow.document.body.appendChild(btn);
主页面与 PiP 窗口通信只能靠 postMessage
两个文档完全隔离，无法共享变量或直接调用函数。数据同步必须走消息通道：
- 主页面发消息：使用
documentPictureInPicture.window.postMessage(data, '*') - PiP 窗口监听：在
documentPictureInPicture.window的document上监听message事件 - 反向通信：PiP 窗口可向主页面发消息，但需主页面提前监听
window.addEventListener('message', ...) - 切记校验
event.source === documentPictureInPicture.window，防止 XSS - 复杂状态（如视频播放进度）建议用序列化对象传递，避免传 DOM 引用或函数
兼容性与降级必须显式处理
目前仅 Chromium 114+ 原生支持 Document PiP，Firefox 和 Safari 完全不支持，且该 API 仍为实验性（documentPictureInPicture 可能为 undefined）：
- 检测前务必加守卫：
if ('documentPictureInPicture' in document) - 失败时 fallback 到传统方案：CSS
position: fixed+z-index模拟悬浮，或使用requestPictureInPicture()（仅限<video></video>） - 用户关闭 PiP 窗口会触发
documentPictureInPicture.onleave事件，此处应清理资源、恢复主页面状态 - 移动端（Android Chrome）PiP 窗口尺寸极小，需用
@media (width 单独适配布局
最易被忽略的一点：PiP 窗口关闭后，documentPictureInPicture.window 不会自动置空，下次进入前需手动检查是否已存在活跃窗口，否则 documentPictureInPicture.requestWindow() 会抛 InvalidStateError。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
