当前位置：首页 > news >正文

JS封装网页进入/退出全屏功能，兼容各大主流浏览器

news 2025/9/7 1:53:33

1、演示

2、封装进入全屏函数

mozRequestFullScreen：兼容Firefox

webkitRequestFullscreen：兼容 Chrome、Safari、Opera

msRequestFullscreen：兼容：IE/Edge
const enter = () => {const element = document.documentElementif (element.requestFullscreen) {element.requestFullscreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}
依次判断当前页面或浏览器是否支持进入全屏模式以达到兼容效果

3、封装退出全屏函数

mozCancelFullScreen：兼容Firefox
webkitExitFullscreen：兼容 Chrome、Safari、Opera
msExitFullscreen：兼容：IE/Edge
    const exit = () => {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}}
依次判断当前页面或浏览器是否支持退出全屏模式以达到兼容效果

4、封装判断当前处于全屏的元素

mozFullScreenElement：兼容Firefox
webkitFullScreenElement：兼容 Chrome、Safari、Opera
msFullScreenElement：兼容：IE/Edge
    const fullEle = () => {return document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullScreenElement || null}

5、封装判断当前是否处于全屏，需借助第4步

    const isFull = () => {return !!fullEle()}

6、封装全屏/退出全屏进行切换的函数

    const toggle = () => {isFull() ? exit() : enter()}

7、完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {padding: 10px;background-color: #eee;width: 300px;}button {background-color: #266fff;color: #fff;border: 0;width: 120px;height: 30px;}</style></head><body><button>进入/退出全屏</button><div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem veniam ullam totam quod ut, reprehenderit exercitationem sunt consequatur ipsacum suscipit cumque, eaque amet illum itaque unde vel adipisci aperiam expedita voluptatibus minima? Consequuntur amet magnam eaque vitaedebitis ab obcaecati adipisci modi earum quod, nihil alias nisi ipsum ipsam reiciendis unde architecto dolores ea expedita. Voluptas</div></body><script>const btn = document.querySelector('button')btn.onclick = () => {toggle()}// 进入全屏const enter = () => {const element = document.documentElementif (element.requestFullscreen) {element.requestFullscreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}// 退出全屏const exit = () => {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}}// 当前处于全屏的元素const fullEle = () => {return document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullScreenElement || null}// 当前是否处于全屏状态const isFull = () => {return !!fullEle()}const toggle = () => {isFull() ? exit() : enter()}</script>
</html>

查看全文

http://www.lryc.cn/news/330891.html