前端实现画中画超简单，让网页飞出浏览器
<h2>Document Picture-in-Picture 介绍</h2><p>今天，我来介绍一个非常酷的前端功能：<strong>文档画中画</strong> (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏</p>
<h3>🎬 视频流媒体的画中画功能</h3>
<p>你可能已经在视频平台（如 <code>腾讯视频</code>、<code>哔哩哔哩</code>等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合 <code>上班偷偷看电视</code>💻</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibunawAG9FjRvibt4JniaVZziaveoPEf8RIZanibHeAmsVef8niaeLVWhJfhN0fiaGLDRXSta4onGJQogbEA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<p>在今天的教程中，不仅仅是视频，我将教你如何 <code>将任何 HTML 内容放入画中画</code>模式，无论是动态内容、文本、图片，还是纯炫酷的 div，统统都能“飞”起来。✨</p>
<p>一个如此有趣的功能，在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁</p>
<h4>体验网址：Treasure-Navigation</h4>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibunawAG9FjRvibt4JniaVZziavuYVWCicNZ853eba5oJq61HXQhz3TD8DEXZGOWUtBPJIVMn0DAEINcmA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<hr />
<h2>📖 Document Picture-in-Picture 详细教程</h2>
<h3>🛠 HTML 基本代码结构</h3>
<p>首先，我们随便写一个简单的 <code>HTML 页面</code>，后续的 JS 和样式都会基于它实现。</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Picture-in-Picture API 示例</title>
<style>
#pipContent {
width: 600px;
height: 300px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="pipContent">这是一个将要放入画中画的 div 元素！</div>
<button id="clickBtn">切换画中画</button>
</div>
<script>
// 在这里写你的 JavaScript 代码
</script>
</body>
</html>
</code></pre>
<hr />
<h3>1️. 请求 PiP 窗口</h3>
<p><code>PiP</code> 的核心方法是 <code>window.documentPictureInPicture.requestWindow</code>。它是一个 <code>异步方法</code>，返回一个新创建的 <code>window</code> 对象。<br />
<code>PIP 窗口</code>可以将其看作一个新的网页，但它始终悬浮在屏幕上方。</p>
<pre><code>document.getElementById("clickBtn").addEventListener("click", async function () {
// 获取将要放入 PiP 窗口的 DOM 元素
const pipContent = document.getElementById("pipContent");
// 请求创建一个 PiP 窗口
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 200,// 设置窗口的宽度
height: 300// 设置窗口的高度
});
// 将原始元素添加到 PiP 窗口中
pipWindow.document.body.appendChild(pipContent);
});
</code></pre>
<h4>演示：</h4>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibunawAG9FjRvibt4JniaVZziav19hjx2GTrDObT8Drg7F6iaZ2ibqtSAYOibOvGvs4kU0JusTeh8VecJHmg/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>👏 **现在，我们已经成功创建了一个画中画窗口！**这段代码展示了如何将网页中的元素放入一个新的画中画窗口，并让它悬浮在最上面。非常简单吧</p>
<h4>关闭PIP窗口</h4>
<p>可以直接点右上角关闭PIP窗口，如果我们想在代码中实现关闭，直接调用 <code>window上的api</code>就可以了</p>
<pre><code>window.documentPictureInPicture.window.close();
</code></pre>
<hr />
<h3>2️. 检查是否支持 PiP 功能</h3>
<p>一切不能<strong>兼容浏览器</strong>的功能介绍都是耍流氓，我们需要检查浏览器是否 <code>支持PIIP功能</code>。实际就是检查documentPictureInPicture属性是否存在于window上 🔧</p>
<pre><code>if ('documentPictureInPicture' in window) {
console.log("🚀 浏览器支持 PiP 功能！");
} else {
console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");
}
</code></pre>
<p>如果是只需要将视频实现画中画功能，<code>视频画中画 (Picture-in-Picture)</code> 的兼容性会好一点，但是它只能将元素放入画中画窗口。它与本文介绍的 <code>文档画中画(Document Picture-in-Picture)</code> 使用方法也是十分相似的。</p>
<h3>3️. 设置 PiP 样式</h3>
<p>我们会发现刚刚创建的画中画 <code>没有样式</code>，一点都不美观。那是因为我们只放入了dom元素，没有添加css样式。</p>
<h4>3.1. 全局样式同步</h4>
<p>假设网页中的所有样式如下：</p>
<pre><code><head>
<style>
#pipContent {
width: 600px;
height: 300px;
background: pink;
font-size: 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://abc.css">
</head>
</code></pre>
<p>为了方便，我们可以直接把之前的网页的 <code>css样式全部赋值给画中画</code>。</p>
<pre><code>// 1. document.styleSheets获取所有的css样式信息
[...document.styleSheets].forEach((styleSheet) => {
try {
// 转成字符串方便赋值
const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
// 创建style标签
const style = document.createElement('style');
// 设置为之前页面中的css信息
style.textContent = cssRules;
console.log('style', style);
// 把style标签放到画中画的<head><head/>标签中
pipWindow.document.head.appendChild(style);
} catch (e) {
// 通过 link 引入样式，如果有跨域，访问styleSheet.cssRules时会报错。没有跨域则不会报错
const link = document.createElement('link');
/**
* rel = stylesheet 导入样式表
* type: 对应的格式
* media: 媒体查询（如 screen and (max-width: 600px)）
*href: 外部样式表的 URL
*/
link.rel = 'stylesheet';
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href ?? '';
console.log('error: link', link);
pipWindow.document.head.appendChild(link);
}
});
</code></pre>
<h5>演示：</h5>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibunawAG9FjRvibt4JniaVZziav2oAo63DynmyYgru3UVwd6WqJVFHowp5xglbnRDOMQJDmOVCZ5lxCQQ/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<hr />
<h4>3.2. 使用 <code>link</code> 引入外部 CSS 文件</h4>
<p>向其他普通 <code>html</code>文件一样，可以通过 <code>link</code>标签引入特定 <code>css</code>文件:</p>
<p>创建 <code>pip.css</code> 文件:</p>
<pre><code>#pipContent {
width: 600px;
height: 300px;
background: skyblue;
}
</code></pre>
<p><code>js</code>引用：</p>
<pre><code>// 其他不变
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = './pip.css';// 引入外部 CSS 文件
pipWindow.document.head.appendChild(link);
pipWindow.document.body.appendChild(pipContent);
</code></pre>
<h5>演示：</h5>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibunawAG9FjRvibt4JniaVZziavRActxgKWeURlopTmxXQRnGcB4A5fQhn0cnb0OFU0f62ebMkXWia2GwQ/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h4>3.3. 媒体查询的支持</h4>
<p>可以设置媒体查询 <code>@media (display-mode: picture-in-picture)</code>。在普通页面中会自动忽略样式，在画中画模式会自动渲染样式</p>
<pre><code><style>
#pipContent {
width: 600px;
height: 300px;
background: pink;
font-size: 20px;
}
<!-- 普通网页中会忽略 -->
@media (display-mode: picture-in-picture) {
#pipContent {
background: lightgreen;
}
}
</style>
</code></pre>
<p>在普通页面中显示为 <code>粉色</code>，在画中画自动变为 <code>浅绿色</code></p>
<h5>演示：</h5>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibunawAG9FjRvibt4JniaVZziavmEI02ChGDaibQUUUDGGSx9OYX8ibQ6GRAic1NWyC1JaxC5iaUZOhgALF6Q/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<hr />
<h3>4️. 监听进入和退出 PiP 模式的事件</h3>
<p>我们还可以为 <code>PiP 窗口</code> 添加 <code>事件监听</code>，监控画中画模式的 <strong>进入</strong> 和 <strong>退出</strong>。这样，你就可以在用户操作时，做出相应的反馈，比如显示提示或执行其他操作。</p>
<pre><code>// 进入 PIP 事件
documentPictureInPicture.addEventListener("enter", (event) => {
console.log("已进入 PIP 窗口");
});
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 200,
height: 300
});
// 退出 PIP 事件
pipWindow.addEventListener("pagehide", (event) => {
console.log("已退出 PIP 窗口");
});
</code></pre>
<h4>演示</h4>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibunawAG9FjRvibt4JniaVZziav8HvEbbpNPHvXzqffSd1NdmYxKDA1o3SXo6hq3hgJuDsmVv4LJaiaM6w/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" /></p>
<hr />
<h3>5️. 监听 PiP 焦点和失焦事件</h3>
<pre><code>const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 200,
height: 300
});
pipWindow.addEventListener('focus', () => {
console.log("PiP 窗口进入了焦点状态");
});
pipWindow.addEventListener('blur', () => {
console.log("PiP 窗口失去了焦点");
});
</code></pre>
<h4>演示</h4>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibunawAG9FjRvibt4JniaVZziav4PBS9jl7aeqNvVVpdyibCdysQjUIAibj4C9XtvkEPPHFrLp6yL10ia6Pg/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<hr />
<h3>6. 克隆节点画中画</h3>
<p>我们会发现我们把原始元素传入到PIP窗口后，原来窗口中的元素就不见了。<br />
我们可以把原始元素克隆后再传入给PIP窗口，这样原始窗口中的元素就不会消失了</p>
<pre><code>const pipContent = document.getElementById("pipContent");
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 200,
height: 300
});
// 核心代码：pipContent.cloneNode(true)
pipWindow.document.body.appendChild(pipContent.cloneNode(true));
</code></pre>
<h4>演示</h4>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibunawAG9FjRvibt4JniaVZziavCy9lb7U0ZSuGVP7VGtPiaoibBh8tFn9WamEe2dDHoJjSq8JUuUBlkV3g/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h3>PIP 完整示例代码</h3>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Picture-in-Picture API 示例</title>
<style>
#pipContent {
width: 600px;
height: 300px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="pipContent">这是一个将要放入画中画的 div 元素！</div>
<button id="clickBtn">切换画中画</button>
</div>
<script>
// 检查是否支持 PiP 功能
if ('documentPictureInPicture' in window) {
console.log("🚀 浏览器支持 PiP 功能！");
} else {
console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");
}
// 请求 PiP 窗口
document.getElementById("clickBtn").addEventListener("click", async function () {
const pipContent = document.getElementById("pipContent");
// 请求创建一个 PiP 窗口
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 200,// 设置窗口的宽度
height: 300// 设置窗口的高度
});
// 将原始元素克隆并添加到 PiP 窗口中
pipWindow.document.body.appendChild(pipContent.cloneNode(true));
// 设置 PiP 样式同步
[...document.styleSheets].forEach((styleSheet) => {
try {
const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
const style = document.createElement('style');
style.textContent = cssRules;
pipWindow.document.head.appendChild(style);
} catch (e) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href ?? '';
pipWindow.document.head.appendChild(link);
}
});
// 监听进入和退出 PiP 模式的事件
pipWindow.addEventListener("pagehide", (event) => {
console.log("已退出 PIP 窗口");
});
pipWindow.addEventListener('focus', () => {
console.log("PiP 窗口进入了焦点状态");
});
pipWindow.addEventListener('blur', () => {
console.log("PiP 窗口失去了焦点");
});
});
// 关闭 PiP 窗口
// pipWindow.close();// 可以手动调用关闭窗口
</script>
</body>
</html>
</code></pre>
<hr />
<h2>总结</h2>
<p>🎉 <strong>你现在已经掌握了如何使用 <code>Document Picture-in-Picture</code> API 来悬浮任意 HTML 内容！希望能带来更灵活的交互体验。✨</strong></p>
页:
[1]