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 全屏显示网页的主要内容,如果未能解决你的问题,请参考以下文章
css 全屏API - HTML5 API - http://www.starstormdesign.de/fullscreen-api-html5/