H5全屏显示方法及浏览器兼容解决方案

全屏操作的主要方法和属性

1.requestFullScreen():开启全屏显示

克服兼容性：不同浏览器需要添加不同的前缀: chrom:webkit firefox:moz ie:ms opera: o

        /*添加三个按钮的点击事件*/
        /*全屏操作*/
        document.querySelector("#full").onclick= function () {
            /*使用能力测试添加不同浏览器下的前缀*/
            if(div.requestFullScreen){
                div.requestFullScreen();
            }else if(div.webkitRequestFullScreen){
                div.webkitRequestFullScreen();
            }
            else if(div.mozRequestFullScreen){
                div.mozRequestFullScreen();
            }else if(div.msRequestFullScreen){
                div.msRequestFullScreen();
            }
        }

2.cancelFullScreen():退出全屏显示

也添加前缀，在不同的浏览器下，退出全屏只能使用document来实现（整个文档退出）

        /*退出全屏*/
    document.querySelector("#cancelFull").onclick= function () {
        /*使用能力测试添加不同浏览器下的前缀*/
        if(document.cancelFullScreen){
            document.cancelFullScreen();
        }else if(document.webkitCancelFullScreen){
            document.webkitCancelFullScreen();
        }
        else if(document.mozCancelFullScreen){
            document.mozCancelFullScreen();
        }else if(document.msCancelFullScreen){
            document.msCancelFullScreen();
        }
    }

3.fullScreenElement:是否是全屏状态

添加前缀，要使用document进行判断

    document.querySelector("#isfull").onclick= function () {
        /*两个细节:使用document判断  能力测试*/
        if(document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){
            alert(true);
        }else{
            alert(false);
        }
    }

效果图：