需求示意图

全屏按钮
全屏按钮
全屏按钮
全屏按钮

点击顶部黄色全屏按钮,所有内容都全屏。再点击下部容器内的任意全屏按钮,小容器全屏。

按ESC所有都退出全屏,回到初始状态。如果是点击退出全屏按钮,就会依次退出全屏。

需求的特殊在于,支持两个元素依次全屏。这个需求今天看属于小case,不过放在多年前的时代,需要一点技巧

脱离框架的写Demo,好累好累,太累啦。

早期API示例🧲

切换全屏
切换全屏
切换全屏
切换全屏

早期的的API是放在document.body身上,没有全屏容器栈的概念,需要自定义实现LIFO栈存储全屏元素,自定义全局class模拟全屏样式

操作相对麻烦,还需要解决全屏后样式,层级问题

❤最新API示例❤

切换全屏
切换全屏
切换全屏
切换全屏
:fullscreen
伪元素::backdrop

现代浏览器提供了很多好用的API,不用特别考虑兼容问题,支持元素的全屏操作,不需要自定义栈,不需要自定义class,全屏样式也是妥妥的

代码简简单单

伪类:fullscreen,伪元素::backdrop