項目中需要將后臺瀏覽器的窗口全屏，也就是我們點擊一個按鈕要實現(xiàn)按F11全屏的效果。 在HTML5中,W3C制定了關(guān)于全屏的API，就可以實現(xiàn)全屏幕的效果，也可以讓頁面中的圖片，視頻等全屏目前只有g(shù)oogle 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(); }

事件監(jiān)聽

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

全屏樣式設(shè)置
在瀏覽器全屏的使用我們還可以進行樣式設(shè)置

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;?? }

總結(jié)

以上是生活随笔為你收集整理的Html5结合JS实现浏览器全屏功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。