Heim > Web-Frontend > H5-Tutorial > Hauptteil

用html5 js实现浏览器全屏

WBOY
Freigeben: 2016-05-17 09:08:08
Original
2082 Leute haben es durchsucht
        项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持。


全屏


  1. var docElm = document.documentElement;

  2. //W3C  

  3. if (docElm.requestFullscreen) {  

  4.     docElm.requestFullscreen();  

  5. }

  6. //FireFox  

  7. else if (docElm.mozRequestFullScreen) {  

  8.     docElm.mozRequestFullScreen();  

  9. }

  10. //Chrome等  

  11. else if (docElm.webkitRequestFullScreen) {  

  12.     docElm.webkitRequestFullScreen();  

  13. }

  14. //IE11

  15. else if (elem.msRequestFullscreen) {

  16.   elem.msRequestFullscreen();

  17. }
复制代码


退出全屏


  1. if (document.exitFullscreen) {  

  2.     document.exitFullscreen();  

  3. }  

  4. else if (document.mozCancelFullScreen) {  

  5.     document.mozCancelFullScreen();  

  6. }  

  7. else if (document.webkitCancelFullScreen) {  

  8.     document.webkitCancelFullScreen();  

  9. }

  10. else if (document.m**itFullscreen) {

  11.       document.m**itFullscreen();

  12. }
复制代码


事件监听


  1. document.addEventListener("fullscreenchange", function () {  

  2.     fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);  

  3.    

  4. document.addEventListener("mozfullscreenchange", function () {  

  5.     fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);  

  6.    

  7. document.addEventListener("webkitfullscreenchange", function () {  

  8.     fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);

  9. document.addEventListener("msfullscreenchange", function () {

  10.     fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
复制代码


全屏样式设置


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


  1. html:-moz-full-screen {  

  2.     background: red;  

  3. }  

  4.    

  5. html:-webkit-full-screen {  

  6.     background: red;  

  7. }  

  8.    

  9. html:fullscreen {  

  10.     background: red;  

  11. }
复制代码


附录


1 一个在线的Demo
    http://robnyman.github.io/fullscreen/
2   HTML5全屏API之网络钓鱼
      http://www.36ria.com/5807
3   jquery封装的全屏插件
     http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4  更加详细的全屏API介绍
    4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
    4.2  https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage