记录---前端实现画中画超简单,让网页飞出浏览器

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

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 功能有更多的想法,欢迎在评论区与我讨论!👇📬

本文转载于:https://juejin.cn/post/7441954981342036006

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

posted @   林恒  阅读(240)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 实操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拖拽
欢迎阅读『记录---前端实现画中画超简单,让网页飞出浏览器』
点击右上角即可分享
微信分享提示