这篇文章主要介绍了前端的 Document Picture-in-Picture 功能。包括基本代码结构、请求 PiP 窗口、检查支持与否、设置样式（全局样式同步、引入外部 CSS 文件、支持媒体查询）、监听进入退出和焦点失焦事件、克隆节点等，还提供了完整示例代码，最后总结掌握该功能可带来更灵活的交互体验。
关联问题: PiP支持哪些浏览器 画中画样式怎么改 如何优化PiP性能
Document Picture-in-Picture 介绍
今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏
🎬 视频流媒体的画中画功能
你可能已经在视频平台（如腾讯视频、哔哩哔哩等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合上班偷偷看电视💻
在今天的教程中，不仅仅是视频，我将教你如何将任何 HTML 内容放入画中画模式，无论是动态内容、文本、图片，还是纯炫酷的 div，统统都能“飞”起来。✨
一个如此有趣的功能，在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁
[体验网址：Treasure-Navigation
](https://link.juejin.cn/?target=https%3A%2F%2Fxionglongbing.github.io%2FTreasure-Navigation “https://xionglongbing.github.io/Treasure-Navigation”)
📖 Document Picture-in-Picture 详细教程
🛠 HTML 基本代码结构
首先，我们随便写一个简单的 HTML 页面，后续的 JS 和样式都会基于它实现。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document Picture-in-Picture API 示例</title>
7 <style>
8 #pipContent {
9 width: 600px;
10 height: 300px;
11 background: pink;
12 font-size: 20px;
13 }
14 </style>
15</head>
16
17<body>
18 <div id="container">
19 <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>
20 <button id="clickBtn">切换画中画</button>
21 </div>
22 <script>
23
24 </script>
25</body>
26</html>
1️. 请求 PiP 窗口
PiP 的核心方法是 window.documentPictureInPicture.requestWindow。它是一个 异步方法，返回一个新创建的 window 对象。
PIP 窗口可以将其看作一个新的网页，但它始终悬浮在屏幕上方。
1document.getElementById("clickBtn").addEventListener("click", async function () {
2
3 const pipContent = document.getElementById("pipContent");
4
5 const pipWindow = await window.documentPictureInPicture.requestWindow({
6 width: 200,
7 height: 300
8 });
9
10
11 pipWindow.document.body.appendChild(pipContent);
12});
演示：
👏 现在，我们已经成功创建了一个画中画窗口！ 这段代码展示了如何将网页中的元素放入一个新的画中画窗口，并让它悬浮在最上面。非常简单吧
关闭PIP窗口
可以直接点右上角关闭PIP窗口，如果我们想在代码中实现关闭，直接调用window上的api就可以了
1window.documentPictureInPicture.window.close();
2️. 检查是否支持 PiP 功能
一切不能兼容浏览器的功能介绍都是耍流氓，我们需要检查浏览器是否支持PIIP功能。 实际就是检查documentPictureInPicture属性是否存在于window上 🔧
1if ('documentPictureInPicture' in window) {
2 console.log("🚀 浏览器支持 PiP 功能！");
3} else {
4 console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");
5}
如果是只需要将视频实现画中画功能，视频画中画 (Picture-in-Picture) 的兼容性会好一点，但是它只能将元素放入画中画窗口。它与本文介绍的 文档画中画(Document Picture-in-Picture) 使用方法也是十分相似的。
3️. 设置 PiP 样式
我们会发现刚刚创建的画中画没有样式，一点都不美观。那是因为我们只放入了dom元素，没有添加css样式。
3.1. 全局样式同步
假设网页中的所有样式如下：
1<head>
2 <style>
3 #pipContent {
4 width: 600px;
5 height: 300px;
6 background: pink;
7 font-size: 20px;
8 }
9 </style>
10 <link rel="stylesheet" type="text/css" href="https://abc.css">
11</head>
为了方便，我们可以直接把之前的网页的css样式全部赋值给画中画。
1[...document.styleSheets].forEach((styleSheet) => {
2 try {
3
4 const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
5
6 const style = document.createElement('style');
7
8 style.textContent = cssRules;
9 console.log('style', style);
10
11 pipWindow.document.head.appendChild(style);
12 } catch (e) {
13
14 const link = document.createElement('link');
15
16 * rel = stylesheet 导入样式表
17 * type: 对应的格式
18 * media: 媒体查询（如 screen and (max-width: 600px)）
19 * href: 外部样式表的 URL
20 */
21 link.rel = 'stylesheet';
22 link.type = styleSheet.type;
23 link.media = styleSheet.media;
24 link.href = styleSheet.href ?? '';
25 console.log('error: link', link);
26 pipWindow.document.head.appendChild(link);
27 }
28});
演示：
3.2. 使用 link 引入外部 CSS 文件
向其他普通html文件一样，可以通过link标签引入特定css文件:
创建 pip.css 文件:
1#pipContent {
2 width: 600px;
3 height: 300px;
4 background: skyblue;
5}
js引用：
1const link = document.createElement('link');
2link.rel = 'stylesheet';
3link.href = './pip.css';
4pipWindow.document.head.appendChild(link);
5pipWindow.document.body.appendChild(pipContent);
演示：
3.3. 媒体查询的支持
可以设置媒体查询 @media (display-mode: picture-in-picture)。在普通页面中会自动忽略样式，在画中画模式会自动渲染样式
1<style>
2 #pipContent {
3 width: 600px;
4 height: 300px;
5 background: pink;
6 font-size: 20px;
7 }
8
9 <!-- 普通网页中会忽略 -->
10 @media (display-mode: picture-in-picture) {
11 #pipContent {
12 background: lightgreen;
13 }
14 }
15</style>
在普通页面中显示为粉色，在画中画自动变为浅绿色
演示：
4️. 监听进入和退出 PiP 模式的事件
我们还可以为 PiP 窗口 添加事件监听，监控画中画模式的 进入 和 退出。这样，你就可以在用户操作时，做出相应的反馈，比如显示提示或执行其他操作。
1documentPictureInPicture.addEventListener("enter", (event) => {
2 console.log("已进入 PIP 窗口");
3});
4
5const pipWindow = await window.documentPictureInPicture.requestWindow({
6 width: 200,
7 height: 300
8});
9
10pipWindow.addEventListener("pagehide", (event) => {
11 console.log("已退出 PIP 窗口");
12});
演示
5️. 监听 PiP 焦点和失焦事件
1const pipWindow = await window.documentPictureInPicture.requestWindow({
2 width: 200,
3 height: 300
4});
5
6pipWindow.addEventListener('focus', () => {
7 console.log("PiP 窗口进入了焦点状态");
8});
9
10pipWindow.addEventListener('blur', () => {
11 console.log("PiP 窗口失去了焦点");
12});
演示
6. 克隆节点画中画
我们会发现我们把原始元素传入到PIP窗口后，原来窗口中的元素就不见了。
我们可以把原始元素克隆后再传入给PIP窗口，这样原始窗口中的元素就不会消失了
1const pipContent = document.getElementById("pipContent");
2const pipWindow = await window.documentPictureInPicture.requestWindow({
3 width: 200,
4 height: 300
5});
6
7pipWindow.document.body.appendChild(pipContent.cloneNode(true));
演示
PIP 完整示例代码
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document Picture-in-Picture API 示例</title>
7 <style>
8 #pipContent {
9 width: 600px;
10 height: 300px;
11 background: pink;
12 font-size: 20px;
13 }
14 </style>
15</head>
16<body>
17 <div id="container">
18 <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>
19 <button id="clickBtn">切换画中画</button>
20 </div>
21
22 <script>
23
24 if ('documentPictureInPicture' in window) {
25 console.log("🚀 浏览器支持 PiP 功能！");
26 } else {
27 console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");
28 }
29
30
31 document.getElementById("clickBtn").addEventListener("click", async function () {
32 const pipContent = document.getElementById("pipContent");
33
34
35 const pipWindow = await window.documentPictureInPicture.requestWindow({
36 width: 200,
37 height: 300
38 });
39
40
41 pipWindow.document.body.appendChild(pipContent.cloneNode(true));
42
43
44 [...document.styleSheets].forEach((styleSheet) => {
45 try {
46 const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
47 const style = document.createElement('style');
48 style.textContent = cssRules;
49 pipWindow.document.head.appendChild(style);
50 } catch (e) {
51 const link = document.createElement('link');
52 link.rel = 'stylesheet';
53 link.type = styleSheet.type;
54 link.media = styleSheet.media;
55 link.href = styleSheet.href ?? '';
56 pipWindow.document.head.appendChild(link);
57 }
58 });
59
60
61 pipWindow.addEventListener("pagehide", (event) => {
62 console.log("已退出 PIP 窗口");
63 });
64
65 pipWindow.addEventListener('focus', () => {
66 console.log("PiP 窗口进入了焦点状态");
67 });
68
69 pipWindow.addEventListener('blur', () => {
70 console.log("PiP 窗口失去了焦点");
71 });
72 });
73
74
75
76 </script>
77</body>
78</html>
79
总结
🎉 你现在已经掌握了如何使用 Document Picture-in-Picture API 来悬浮任意 HTML 内容！ 希望能带来更灵活的交互体验。✨