document pip 仅 chrome/edge 113+ 支持，需检查 'documentpictureinpicture' in window；元素须已渲染且可见，调用 requestwindow({width,height}) 返回 promise；关闭只能用 pipwindow.close()。
直接用 documentPictureInPicture.requestWindow() 创建独立 PiP 窗口，比视频 PiP 更自由，但支持度低得多——目前仅 Chrome 113+ 和 Edge 113+ 原生支持，Firefox、Safari 完全不认这个 API。
怎么判断浏览器是否支持 Document PiP
别查 requestPictureInPicture，那是视频用的。Document PiP 是另一套机制，必须检查 window.documentPictureInPicture 是否存在：
-
'documentPictureInPicture' in window为true才表示支持 - 即使存在，也得确保当前上下文是安全的（
https://或localhost） - 不能在 iframe 里调用，除非主页面显式启用了
allow="document-picture-in-picture"
如何正确调用 requestWindow() 并传入 DOM 元素
Document PiP 不是把整个页面飞出去，而是把指定 DOM 节点“搬进”一个新窗口。关键限制是：该节点必须已挂载到当前文档中，且不能是 display: none 或 visibility: hidden 的状态。
- 调用前需确保元素已渲染：
element.offsetParent !== null -
requestWindow()接收一个配置对象，width和height是必需字段（Chrome 会拒绝无尺寸的请求） - 返回的是 Promise，必须
await或.then()处理；失败时常见SecurityError（跨域 iframe）、NotAllowedError（非用户手势触发） - 示例代码片段：
const pipContent = document.getElementById('pipContent');
button.addEventListener('click', async () => {
try {
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 320,
height: 180
});
pipWindow.document.body.appendChild(pipContent);
} catch (err) {
console.error('Document PiP 启动失败:', err.name);
}
});
退出 Document PiP 窗口只能用 close()，没有 exit 方法
和视频 PiP 的 document.exitPictureInPicture() 完全不同，Document PiP 没有全局退出接口。你拿到的 pipWindow 是一个真实 Window 对象，关闭它只能调用：
-
pipWindow.close()—— 这是唯一合法方式 - 不能依赖
leavepictureinpicture事件（它只属于 video PiP） - 也不能监听
beforeunload，因为 PiP 窗口生命周期独立于主页面 - 若想在主页面感知关闭，需在
pipWindow内主动 postMessage 回来
Document PiP 的最大陷阱在于：它看起来像视频 PiP，实则 API 设计、触发条件、生命周期管理全都不一样。开发者最容易误以为 requestWindow() 是 requestPictureInPicture() 的“升级版”，结果在 Safari 或 Firefox 里完全跑不通，连降级逻辑都难写——因为缺乏统一的状态检测入口，比如没有类似 document.pictureInPictureElement 的对应属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
