使用openseadragon插件，全屏判断

本文主要针对使用了openseadragon.js这个插件以后，出现的全屏状态，进行的判断，这是一个实现图片放大缩小拖拽功能的插件，将在其它文章中进行讲解。

方法一：
思路：当使用上述插件点击全屏以后，页面元素清空，变成下图红框的内容，因此判断class名的main这个元素是否存在，得以判断是否全屏。

if($(".main").length <= 0 ){
    //退出全屏
    var exitMethod = document.exitFullscreen || //W3C
        document.mozCancelFullScreen || //FireFox
        document.webkitExitFullscreen || //Chrome等
        document.webkitExitFullscreen; //IE11
    if (exitMethod) {
        exitMethod.call(document);
    } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

方法二：
弊端：ie浏览器兼容性差，360浏览器不兼容

document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
  console.log('进入全屏');
} else {
  console.log('退出全屏');
}});

方法三：
默认非全屏状态，定义一个状态，当浏览器更改以后，状态更改。(无兼容问题)

var flag = true;
function autodivheight() {
    if(flag){
        flag = false;
        console.log("全屏")
    }else{
        flag = true;
        console.log("非全屏")
    }
}
window.onresize = autodivheight;