js设置页面全屏

2019-05-22 06:31:13来源：博客园阅读 ()

html代码

<!-- 全屏按钮 -->
    <img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" />

js代码

    // 设置全屏
$('#alarm-fullscreen-toggler').on('click', function (e) {
    var element = document.documentElement;     // 返回 html dom 中的root 节点 <html>
    
    if(!$('body').hasClass('full-screen')) {
        $('body').addClass('full-screen');
        $('#alarm-fullscreen-toggler').addClass('active');
        // 判断浏览器设备类型
        if(element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen){   // 兼容火狐
            element.mozRequestFullScreen();
        } else if(element.webkitRequestFullscreen) {    // 兼容谷歌
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {   // 兼容IE
            element.msRequestFullscreen();
        }
        // 切换全屏按钮
        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/close.png');
    } else {            // 退出全屏
        console.log(document);
        $('body').removeClass('full-screen');
        $('#alarm-fullscreen-toggler').removeClass('active');
        //  退出全屏
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        // 切换全屏按钮
        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/open.png');
    }
});