JS实现浏览器全屏及退出全屏的方法

JS全屏效果

我们知道，浏览器全屏通常按快捷键F22。JS**浏览器全屏也不稀奇，它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。

JS让浏览器全屏及退出全屏的方法网上很多，这不是重点，重点是需注意：浏览器全屏只能通过鼠标手势点击事件去触发。

JS全屏方法

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
    $fullScreen.addEventListener("click", function () { 
        var docElm = document.documentElement; 
        if (docElm.requestFullscreen) { 
            docElm.requestFullscreen(); 
        } 
        else if (docElm.msRequestFullscreen) { 
            docElm.msRequestFullscreen(); 
        } 
        else if (docElm.mozRequestFullScreen) { 
            docElm.mozRequestFullScreen(); 
        } 
        else if (docElm.webkitRequestFullScreen) { 
            docElm.webkitRequestFullScreen(); 
        } 
    }, false); 
} 

JS退出全屏方法

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
if ($cancelFullScreen) { 
    $cancelFullScreen.addEventListener("click", function () { 
        if (document.exitFullscreen) { 
            document.exitFullscreen(); 
        } 
        else if (document.msExitFullscreen) { 
            document.msExitFullscreen(); 
        } 
        else if (document.mozCancelFullScreen) { 
            document.mozCancelFullScreen(); 
        } 
        else if (document.webkitCancelFullScreen) { 
            document.webkitCancelFullScreen(); 
        } 
    }, false); 
} 

**台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

释义：在"Element"上执行"requestFullscreen"方法失败，javascript API仅允许通过手势去创建！（即没有权限）

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉，此方法行不通，必须通过手势去创建，哪怕onload、trigger()、mouseover也触发不了！

**解释

该Element.requestFullscreen()方法发出异步请求，使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式，文档将收到一个fullscreenchange事件，让它知道它现在处于全屏模式。如果权限被拒绝，则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发，即click()。

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。