Html5结合JS实现浏览器全屏功能

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 , safri5.1 ,firfox10 ,IE11支持

全屏

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var docElm = document.documentElement; //W3C   if (docElm.requestFullscreen) {       docElm.requestFullscreen();   } //FireFox   else if (docElm.mozRequestFullScreen) {       docElm.mozRequestFullScreen();   } //Chrome等   else if (docElm.webkitRequestFullScreen) {       docElm.webkitRequestFullScreen();   } //IE11 else if (elem.msRequestFullscreen) {   elem.msRequestFullscreen(); }

退出全屏

1 2 3 4 5 6 7 8 9 10 11 12

if (document.exitFullscreen) {       document.exitFullscreen();   }   else if (document.mozCancelFullScreen) {       document.mozCancelFullScreen();   }   else if (document.webkitCancelFullScreen) {       document.webkitCancelFullScreen();   } else if (document.msExitFullscreen) {       document.msExitFullscreen(); }

事件监听

1 2 3 4 5 6 7 8 9 10

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);

全屏样式设置
在浏览器全屏的使用我们还可以进行样式设置

1 2 3 4 5 6 7 8 9 10 11

html:-moz-full-screen {       background: red;   }        html:-webkit-full-screen {       background: red;   }        html:fullscreen {       background: red;   }

总结

以上是生活随笔为你收集整理的Html5结合JS实现浏览器全屏功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。