Home >Web Front-end >JS Tutorial >Detailed explanation of JS full screen and exit full screen (including code)

Detailed explanation of JS full screen and exit full screen (including code)

亚连Original: 2018-05-19 14:20:229303browse

We may see a lot of exiting full-screen effects and full-screen effects when watching video websites. Here we will introduce you to the use of js full-screen and exit full-screen code examples. Friends who need it can refer to it

JS full screen and exit full screen

js implements the functions of browser window full screen and exit full screen. Mainstream browsers on the market such as: Google, Firefox, 360, etc. are all compatible, but the lower version of IE is a bit Flaws (there is still a status bar at the bottom in full screen mode).

This demo is basically enough. Just copy the source code below and save it as an html file to see the effect.

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
  requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
 // 判断各种浏览器，找到正确的方法
 var requestMethod = element.requestFullScreen || //W3C
 element.webkitRequestFullScreen || //Chrome等
 element.mozRequestFullScreen || //FireFox
 element.msRequestFullScreen; //IE11
 if (requestMethod) {
  requestMethod.call(element);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}

//Exit full screen to determine browser type

function exitFull() {
 // 判断各种浏览器，找到正确的方法
 var exitMethod = document.exitFullscreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitExitFullscreen || //FireFox
 document.webkitExitFullscreen; //IE11
 if (exitMethod) {
  exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}
</script>
</html>

We know, browse To go full screen, usually press the shortcut key F11. It is not uncommon for JS to control the browser's full screen. It makes web applications look more like native software applications. For example, ordering system, calling system, etc.

There are many JS methods to make the browser full screen and exit full screen. This is not the point. The point is to note: browser full screen can only be triggered by mouse gesture click events.

JS full screen method

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
  $fullScreen.addEventListener("click", function () { 
    var docElm = document.documentElement; 
    if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
    } 
  }, false); 
}

JS exit full screen method

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
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); 
}

Console warning

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

Interpretation: on "Element" Execution of the "requestFullscreen" method failed, the javascript API only allows creation through gestures! (i.e. no permission)

Usually caused by the programmer wanting to trigger the browser to automatically display full screen. But I'm sorry, this method doesn't work. It must be created through gestures. Even onload, trigger(), and mouseover cannot be triggered!

Official explanation

The Element.requestFullscreen() method issues an asynchronous request to display the element in full screen. But there is no guarantee that the element will be put into full screen mode.

If full screen mode is allowed, the document will receive a fullscreenchange event to let it know that it is now in full screen mode. If permission is denied, the document receives a FullScreenError event.

Conclusion

Maybe for the sake of user experience, client-side javascript allows the browser to be full-screen only through mouse gesture click events, that is, click() .

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Nodejs Electron ubuntu installation steps detailed explanation

Native JS AJAX Produce three-level linkage effect (with code)

Vue.jsTwo-way binding implementation step instructions

The above is the detailed content of Detailed explanation of JS full screen and exit full screen (including code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript array loop traversal (forEach detailed explanation)Next article：Javascript array loop traversal (forEach detailed explanation)

See more

Detailed explanation of JS full screen and exit full screen (including code)

Related articles