JS实现浏览器全屏及退出全屏的方法

JS前端如何让浏览器全屏、退出全屏?其实是在"Element"上执行"requestFullscreen"方法。JS触发浏览器全屏,控制台报错是什么原因?

JS全屏效果
JS全屏效果

我们知道,浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇,它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。

JS让浏览器全屏及退出全屏的方法网上很多,这不是重点,重点是需注意:浏览器全屏只能通过鼠标手势点击事件去触发

JS全屏方法

  1. var $fullScreen = document.getElementById("js-fullScreen");//按钮 
  2. if ($fullScreen) { 
  3.     $fullScreen.addEventListener("click"function () { 
  4.         var docElm = document.documentElement; 
  5.         if (docElm.requestFullscreen) { 
  6.             docElm.requestFullscreen(); 
  7.         } 
  8.         else if (docElm.msRequestFullscreen) { 
  9.             docElm.msRequestFullscreen(); 
  10.         } 
  11.         else if (docElm.mozRequestFullScreen) { 
  12.             docElm.mozRequestFullScreen(); 
  13.         } 
  14.         else if (docElm.webkitRequestFullScreen) { 
  15.             docElm.webkitRequestFullScreen(); 
  16.         } 
  17.     }, false); 

JS退出全屏方法

  1. var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
  2. if ($cancelFullScreen) { 
  3.     $cancelFullScreen.addEventListener("click"function () { 
  4.         if (document.exitFullscreen) { 
  5.             document.exitFullscreen(); 
  6.         } 
  7.         else if (document.msExitFullscreen) { 
  8.             document.msExitFullscreen(); 
  9.         } 
  10.         else if (document.mozCancelFullScreen) { 
  11.             document.mozCancelFullScreen(); 
  12.         } 
  13.         else if (document.webkitCancelFullScreen) { 
  14.             document.webkitCancelFullScreen(); 
  15.         } 
  16.     }, false); 

控制台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

释义:在"Element"上执行"requestFullscreen"方法失败,javascript API仅允许通过手势去创建!(即没有权限)

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉,此方法行不通,必须通过手势去创建,哪怕onload、trigger()、mouseover也触发不了!

官方解释

该Element.requestFullscreen()方法发出异步请求,使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式,文档将收到一个fullscreenchange事件,让它知道它现在处于全屏模式。如果权限被拒绝,则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧,客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发,即click()。

 

相关经验

导读书签
书签初始化中…