HTML+JS实现F11全屏、退出全屏功能

复制以下代码在HTML文件中打开即可

若是docElm.XXX报错,则用doc['XXX']代替

<input id="Button1" type="button" value="开始全屏" onclick="kaishi()" />
<input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" />

<script>
    function kaishi()
    {
        var docElm = document.documentElement;
        //W3C
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
        //IE11
        else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    }

    function guanbi() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }

    document.addEventListener("fullscreenchange", function () {
        fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
    }, false);

    document.addEventListener("mozfullscreenchange", function () {
        fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
    }, false);

    document.addEventListener("webkitfullscreenchange", function () {
        fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
    }, false);

    document.addEventListener("msfullscreenchange", function () {
        fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
    }, false);
</script>

 

/**
 * 获取当前全屏状态
 */
static nowScreen() {
  if (BrowserUtil.browserType() == 'Firefox') {
    return (top.document.body.scrollHeight == top.window.screen.height && top.document.body.scrollWidth == top.window.screen.width);
  } else {
    return (top.document.body.scrollHeight == top.window.screen.height && top.document.body.scrollWidth == top.window.screen.width) || (top.document.fullscreenEnabled || top.document.webkitIsFullScreen);
  }
}