是时候放弃 window.open() 了，画中画 API 才是未来？

大家好，欢迎来到IT知识分享网。

大家好，很高兴又见面了，我是”高级前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

文档画中画 API (Document PiP API) 允许 Web 应用程序打开一个浮动的、始终位于最上方的窗口，即画中画窗口，该窗口可以显示任意 HTML 内容。

此 API 建立在 <video> 画中画 API 之上，可让开发者继续在 PiP 窗口中观看视频。由于文档画中画可以显示任意 HTML 内容，因此前景非常广泛。

如何使用 Document PiP API

要使用画中画 API，请提前检查浏览器是否支持：

const isPipSupported = "documentPictureInPicture" in window;

开发者还可以使用变量包装任何 documentPictureInPicture 调用，或从依赖于 Document PiP 的函数中提前 return。以下代码检查是否支持 Document PiP，然后打开 Document PiP 窗口。

async function initDocumentPip() { if (!isPipSupported) { return false; } const pipWindow = await documentPictureInPicture.requestWindow({ width: window.innerWidth, height: window.innerHeight, }); }

根据使用情况，开发者可以为 window 指定任意宽度和高度，例如：尝试匹配特定元素、当前文档，甚至提供固定值。

同时，假如有一个空文档，可以考虑使用下面方法填充内容：

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

参考资料

https://developer.chrome.com/blog/document-pip-use-case?hl=en

https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture