Fullscreen API 全屏显示网页

Posted 心存善念

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 全屏显示网页的主要内容,如果未能解决你的问题,请参考以下文章

HTML5全屏(Fullscreen)API详细介绍

HTML5 API详解:fullscreen全屏模式

如何在Js脚本中,默认打开一个全屏的窗口,

css 全屏API - HTML5 API - http://www.starstormdesign.de/fullscreen-api-html5/

javascript windows.open打开fullscreen全屏

Android应用如何全屏显示