记录---前端实现画中画超简单,让网页飞出浏览器
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
Document Picture-in-Picture 介绍
今天,我来介绍一个非常酷的前端功能:文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过,网页上的任何内容能悬浮在桌面上?😏
🎬 视频流媒体的画中画功能
你可能已经在视频平台(如腾讯视频
、哔哩哔哩
等网页)见过这种效果:视频播放时,可以点击画中画后。无论你切换页面,它都始终显示在屏幕的最上层,非常适合上班偷偷看电视
💻
在今天的教程中,不仅仅是视频,我将教你如何将任何 HTML 内容放入画中画
模式,无论是动态内容、文本、图片,还是纯炫酷的 div,统统都能“飞”起来。✨
一个如此有趣的功能,在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁
体验网址:Treasure-Navigation
📖 Document Picture-in-Picture 详细教程
🛠 HTML 基本代码结构
首先,我们随便写一个简单的 HTML 页面
,后续的 JS 和样式都会基于它实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!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> |
1️. 请求 PiP 窗口
PiP
的核心方法是 window.documentPictureInPicture.requestWindow
。它是一个 异步方法
,返回一个新创建的 window
对象。
PIP 窗口
可以将其看作一个新的网页,但它始终悬浮在屏幕上方。
1 2 3 4 5 6 7 8 9 10 11 12 | 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); }); |
演示:
👏 现在,我们已经成功创建了一个画中画窗口! 这段代码展示了如何将网页中的元素放入一个新的画中画窗口,并让它悬浮在最上面。非常简单吧
关闭PIP窗口
可以直接点右上角关闭PIP窗口,如果我们想在代码中实现关闭,直接调用window上的api
就可以了
1 | window.documentPictureInPicture.window.close(); |
2️. 检查是否支持 PiP 功能
一切不能兼容浏览器的功能介绍都是耍流氓,我们需要检查浏览器是否支持PIIP功能
。 实际就是检查documentPictureInPicture属性是否存在于window上 🔧
1 2 3 4 5 | if ( 'documentPictureInPicture' in window) { console.log( "🚀 浏览器支持 PiP 功能!" ); } else { console.warn( "⚠️ 当前浏览器不支持 PiP 功能,更新浏览器或者换台电脑吧!" ); } |
如果是只需要将视频实现画中画功能,视频画中画 (Picture-in-Picture)
的兼容性会好一点,但是它只能将元素放入画中画窗口。它与本文介绍的 文档画中画(Document Picture-in-Picture)
使用方法也是十分相似的。
3️. 设置 PiP 样式
我们会发现刚刚创建的画中画没有样式
,一点都不美观。那是因为我们只放入了dom元素,没有添加css样式。
3.1. 全局样式同步
假设网页中的所有样式如下:
1 2 3 4 5 6 7 8 9 10 11 | <head> <style> #pipContent { width: 600px; height: 300px; background: pink; font-size: 20px; } </style> <link rel= "stylesheet" type= "text/css" href= "https://abc.css" > </head> |
为了方便,我们可以直接把之前的网页的css样式全部赋值给画中画
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // 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); } }); |
演示:
3.2. 使用 link
引入外部 CSS 文件
向其他普通html
文件一样,可以通过link
标签引入特定css
文件:
创建 pip.css
文件:
1 2 3 4 5 | #pipContent { width: 600px; height: 300px; background: skyblue; } |
js
引用:
1 2 3 4 5 6 | // 其他不变 const link = document.createElement( 'link' ); link.rel = 'stylesheet' ; link.href = './pip.css' ; // 引入外部 CSS 文件 pipWindow.document.head.appendChild(link); pipWindow.document.body.appendChild(pipContent); |
演示:
3.3. 媒体查询的支持
可以设置媒体查询 @media (display-mode: picture-in-picture)
。在普通页面中会自动忽略样式,在画中画模式会自动渲染样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> #pipContent { width: 600px; height: 300px; background: pink; font-size: 20px; } <!-- 普通网页中会忽略 --> @media (display-mode: picture- in -picture) { #pipContent { background: lightgreen; } } </style> |
在普通页面中显示为粉色
,在画中画自动变为浅绿色
演示:
4️. 监听进入和退出 PiP 模式的事件
我们还可以为 PiP 窗口
添加事件监听
,监控画中画模式的 进入 和 退出。这样,你就可以在用户操作时,做出相应的反馈,比如显示提示或执行其他操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 进入 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 窗口" ); }); |
演示
5️. 监听 PiP 焦点和失焦事件
1 2 3 4 5 6 7 8 9 10 11 12 | const pipWindow = await window.documentPictureInPicture.requestWindow({ width: 200, height: 300 }); pipWindow.addEventListener( 'focus' , () => { console.log( "PiP 窗口进入了焦点状态" ); }); pipWindow.addEventListener( 'blur' , () => { console.log( "PiP 窗口失去了焦点" ); }); |
演示
6. 克隆节点画中画
我们会发现我们把原始元素传入到PIP窗口后,原来窗口中的元素就不见了。
我们可以把原始元素克隆后再传入给PIP窗口,这样原始窗口中的元素就不会消失了
1 2 3 4 5 6 7 | 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 )); |
演示
PIP 完整示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!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> |
总结
🎉 你现在已经掌握了如何使用 Document Picture-in-Picture
API 来悬浮任意 HTML 内容! 希望能带来更灵活的交互体验。✨
如果你有什么问题,或者对 PiP 功能有更多的想法,欢迎在评论区与我讨论!👇📬
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2022-12-02 记录--从AI到美颜全流程讲解
2020-12-02 CSS3+JS完美实现放大镜模式
2020-12-02 原生JS拖拽