screenfull.js --浏览器全屏插件

screenfull.js是用于跨浏览器使用JavaScript Fullscreen API的简单包装器, 可让您将页面或任何元素全屏显示, 并且平滑浏览器实现差异,

github地址： 。

压缩版下载地址:

项目中需要将后台浏览器的窗口全屏, 也就是我们点击一个按钮要实现按F11全屏的效果。

在HTML5中,W3C制定了关于全屏的API, 就可以实现全屏幕的效果, 也可以让页面中的图片,

视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

var docElm = document.documentElement;//W3Cif (docElm.requestFullscreen) {docElm.requestFullscreen();}//FireFoxelse if (docElm.mozRequestFullScreen) {docElm.mozRequestFullScreen();}//Chrome等else if (docElm.webkitRequestFullScreen) {docElm.webkitRequestFullScreen();}//IE11else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}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);

实例:

html代码:

<p><button id="view-fullscreen">Fullscreen</button><button id="cancel-fullscreen">Cancel fullscreen</button></p>

js代码

(function () {var viewFullScreen = document.getElementById("view-fullscreen");if (viewFullScreen) {viewFullScreen.addEventListener("click", function () {var docElm = document.documentElement;if (docElm.requestFullscreen) {docElm.requestFullscreen();}else if (docElm.msRequestFullscreen) {docElm = document.body; //overwrite the element (for IE)docElm.msRequestFullscreen();}else if (docElm.mozRequestFullScreen) {docElm.mozRequestFullScreen();}else if (docElm.webkitRequestFullScreen) {docElm.webkitRequestFullScreen();}}, false);}var cancelFullScreen = document.getElementById("cancel-fullscreen");if (cancelFullScreen) {cancelFullScreen.addEventListener("click", function () {if (document.exitFullscreen) {document.exitFullscreen();}else if (document.msExitFullscreen) {document.msExitFullscreen();}else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();}else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}}, false);}var fullscreenState = document.getElementById("fullscreen-state");if (fullscreenState) {document.addEventListener("fullscreenchange", function () {fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not ";}, false);document.addEventListener("msfullscreenchange", function () {fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);document.addEventListener("mozfullscreenchange", function () {fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);document.addEventListener("webkitfullscreenchange", function () {fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);}var marioVideo = document.getElementById("mario-video")videoFullscreen = document.getElementById("video-fullscreen");if (marioVideo && videoFullscreen) {videoFullscreen.addEventListener("click", function (evt) {if (marioVideo.requestFullscreen) {marioVideo.requestFullscreen();}else if (marioVideo.msRequestFullscreen) {marioVideo.msRequestFullscreen();}else if (marioVideo.mozRequestFullScreen) {marioVideo.mozRequestFullScreen();}else if (marioVideo.webkitRequestFullScreen) {marioVideo.webkitRequestFullScreen();/**Kept here for reference: keyboard support in full screen* marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);*/}}, false);}})();