JS控制页面全屏（兼容IE10 谷歌 火狐）

之前有一个项目可能需要全屏展示图标信息，所以在网上找到一段代码,如下：

	var element = document.documentElement;
    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) {
            element.msRequestFullscreen();
        }
    } else {
        $('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();
        }

    }

经过测试之后发现只有在谷歌浏览器下才可以正常运行，IE和火狐并没有效果，查看火狐控制台提示如下：

 

一经想到我这个页面是作为iframe嵌入到主页面当中的，所以在iframe中添加 allowFullscreen属性，并设置为true。 至此，网页并可正常全屏了。