浏览器实现画中画，让网页飞出浏览器_documentpictureinpicture 怎么设置title-优快云博客

本文链接：https://blog.youkuaiyun.com/Mister_SNAIL/article/details/145267556
Document Picture-in-Picture学习
<!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;
    }

    /* css样式全部赋值给画中画（css实现，普通网页中会忽略） */
    /* @media (display-mode: picture-in-picture) {
      #pipContent {
        background: yellow;
      }
    } */
  </style>
</head>

<body>
  <div id="container">
    <div id="pipContent">
      这是一个将要放入画中画的 div 元素！
    </div>
    <button id="showBtn">切换画中画</button>
    <button id="cancleBtn">关闭画中画</button>
  </div>
  
  <script>
    // css样式全部赋值给画中画（js实现）
    const setStyleToPipWindow = (pipWindow) => {
      // 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);
        }
      });
    };

    // 检查是否支持 PiP 功能
    const canIUsePip = () => {
      const canIUse = 'documentPictureInPicture' in window;
      canIUse ? console.log('🚀 浏览器支持 PiP 功能！') : console.warn('⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！');
      return canIUse;
    };

    // 关闭画中画
    document.getElementById('cancleBtn').addEventListener('click', function () {
      window.documentPictureInPicture.window.close();
    });

    // 切换画中画
    document.getElementById('showBtn').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窗口
      pipWindow.document.body.appendChild(pipContent.cloneNode(true));
      // 设置样式
      setStyleToPipWindow(pipWindow);

      // 退出 PIP 事件
      pipWindow.addEventListener("pagehide", (event) => {
        console.log("已退出 PIP 窗口");
      });
      pipWindow.addEventListener('focus', () => {
        console.log("PiP 窗口进入了焦点状态");
      });
      pipWindow.addEventListener('blur', () => {
        console.log("PiP 窗口失去了焦点");
      });
    });

    // 进入 PIP 事件
    documentPictureInPicture.addEventListener("enter", (event) => {
      console.log("已进入 PIP 窗口");
    });
  
    canIUsePip();
  </script>
</body>

</html>