Document Picture-in-Picture API与任意元素画中画实现
内容提要
文章介绍使用 documentPictureInPicture.requestWindow() 将普通元素（如 figure 图片）放入画中画，即使浏览器最小化仍可显示。示例涵盖进入与退出、向画中画窗口注入样式、自定义退出按钮，以及通过 display-mode 媒体查询调整样式。该特性在桌面端 Chrome 支持良好，Safari 暂不支持。
延伸解读
从视频到任意元素：画中画能力的扩展
文章指出，画中画技术早在2018年就已介绍，但当时仅支持视频元素。如今通过documentPictureInPicture.requestWindow()方法，普通元素如figure图片也能进入画中画窗口。这意味着开发者可以将任意HTML内容放入独立的小窗口，即使浏览器最小化，该窗口仍保持显示，为多任务场景提供了新的交互可能。
样式注入的实践细节与限制
在画中画窗口中，直接插入<link>元素链接外部CSS文件无效，作者改为通过fetch获取CSS文本，再用<style>元素内联注入。同时，画中画窗口内可使用@media (display-mode: picture-in-picture)媒体查询来调整样式，例如改变背景色。这些细节表明，画中画窗口的样式管理需要额外处理，不能完全依赖原有页面的样式加载机制。
兼容性现状与使用建议
文章提到，该特性在桌面端Chrome支持良好，但Safari暂不支持。作者认为，由于桌面端Chrome占据主导地位，因此可以大胆使用此特性，即使浏览器不支持，也只会保持现状，不会造成功能损坏。开发者在使用时需注意兼容性，并考虑为不支持的环境提供降级方案。
Q&A
如何让普通元素（比如图片）进入画中画模式？
使用 documentPictureInPicture.requestWindow() 方法，传入宽高参数，然后在返回的 Promise 中获取画中画窗口对象，将目标元素添加到该窗口的 document.body 中即可。
画中画窗口的样式如何自定义？
可以通过 fetch 获取外部 CSS 文件内容，创建 <style> 元素并设置 textContent，然后添加到画中画窗口的 head 中；也可以克隆页面已有的 style 元素。此外，使用 @media (display-mode: picture-in-picture) 媒体查询可以针对画中画模式调整样式。
如何为画中画窗口添加自定义的退出按钮？
监听 documentPictureInPicture 的 enter 事件，在事件回调中获取画中画窗口对象，创建 button 元素并设置文本和样式，添加点击事件调用 window.documentPictureInPicture.window.close() 来关闭窗口，最后将按钮添加到画中画窗口的 body 中。
画中画窗口在浏览器最小化时还能显示吗？
是的，进入画中画状态后，即使浏览器最小化，画中画小窗口依然会显示在屏幕上。
documentPictureInPicture API 的浏览器兼容性如何？
该特性在桌面端 Chrome 支持良好，但 Safari 暂不支持。由于桌面端 Chrome 占主导，因此可以大胆使用，即使浏览器不支持，也只会保持现状。
进入画中画后，如何恢复原页面元素？
监听画中画窗口的 pagehide 事件，在事件回调中将原元素重新插入到原页面的指定位置，并隐藏提示信息。
