首页 > 代码库 > Fullscreen API 全屏显示网页

Fullscreen API 全屏显示网页

可参考文档:http://blog.csdn.net/tywali/article/details/8623938

脚本代码

 <script type="text/javascript">          var support = {             fullscreen: "fullscreen" in document || "webkitIsFullScreen" in document || "mozFullScreen" in document         };        $.fn.fullscreen = function (e) {            return "onfullscreenchange" in document ? this.bind("fullscreenchange", e) : "onwebkitfullscreenchange" in document ? this.bind("webkitfullscreenchange", e) : "onmozfullscreenchange" in document && this.bind("mozfullscreenchange", e),            this        },        $.fn.requestFullScreen = function () {            var e = this[0];            return e.requestFullScreen ? e.requestFullScreen() : e.mozRequestFullScreen && document.mozFullScreenEnabled ? e.mozRequestFullScreen() : e.webkitRequestFullScreen && e.webkitRequestFullScreen(),            this        },        $.isFullscreen = function () {            return "fullscreen" in document ? document.fullscreen : "webkitIsFullScreen" in document ? document.webkitIsFullScreen : "mozFullScreen" in document ? document.mozFullScreen : !1        },        $.exitFullscreen = function () {            document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()        };                 $(function () {            var mainStage = $(".main-stage");//要显示全屏的div            $("a.btn-fullscreen").click(function () { //点击事件                if (support.fullscreen) {                    if ($.isFullscreen()) {                        $.exitFullscreen();                        mainStage.css("right", "320px");                     } else {                        mainStage.requestFullScreen();                        mainStage.css("right", 0);//控制右边的部分隐藏                    }                 }            });            $("#theatre").keyup(function (e) {                if (e.which === 27) {                     mainStage.css("right", "320px");//恢复原状                }            });             if (!support.fullscreen) { $("a.btn-fullscreen").addClass("hidden") }//不支持全屏则隐藏按钮        });    </script>

 

Fullscreen API 全屏显示网页