JavaScript methods, properties and events for controlling browser full screen and various browser full screen modes_javascript skills

Full screen in HTML 5 can currently be used in browsers except IE and Opera. It is sometimes used for full-screen APIs, games, etc. It is very useful. Let’s look at common APIs first

element.requestFullScreen()

Function: Request the full screen of a certain element

Document.getElementById(“myCanvas”).requestFullScreen()

Here is the element ID to request fullscreen

Exit full screen

document.cancelFullScreen()

Document.fullScreen

Returns true if the user is in full screen mode

document.fullScreenElement

Returns the element currently in full screen mode

The following code turns on full screen mode:

function fullScreen(element) { 
  if(element.requestFullScreen) { 
  element.requestFullScreen(); 
 } else if(element.webkitRequestFullScreen ) { 
   element.webkitRequestFullScreen(); 
  } else if(element.mozRequestFullScreen) { 
  element.mozRequestFullScreen(); 
 } 
 } 

The following code is to call the full screen mode for the entire page

But to be honest, there is a problem with FULL SCREEN, which can easily lead to deception, such as in
http://feross.org/html5-fullscreen-api-attack/, there is a good DEMO to deceive, for example, a link says http: //www.bankofamerica.com, everyone thinks it is Bank of America. Once you enter, it will deceive people because it uses the full-screen API

$('html').on('click keypress', 'a', function(event) { 
  // 不响应真正的A HREF点击事件 
 event.preventDefault(); 
  event.stopPropagation(); 
  // Trigger fullscreen 
  if (elementPrototype.requestFullscreen) { 
   document.documentElement.requestFullscreen(); 
  } else if (elementPrototype.webkitRequestFullScreen) { 
   document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } else if (elementPrototype.mozRequestFullScreen) { 
   document.documentElement.mozRequestFullScreen(); 
  } else { 
   // 
  } 
  //显示假的UI 
  $('#menu, #browser').show(); 
  $('#target-site').show(); 
 }); 

The following is an introduction to the methods, properties and events of JavaScript to control the full-screen mode of various browsers

The browser full-screen mode startup function requestFullscreen still needs to be accompanied by the js dialect prefix of each browser. I believe that the following code will require you to spend a lot of searching to get it together:

The code is as follows:

// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

Call the full screen method on the page element you want to display in full screen. The browser window will become full screen, but the user will be asked to allow full screen mode first. Be aware that users will most likely reject full screen mode. If the user runs in full-screen mode, the browser's toolbar and other button menus will be hidden, and your page will cover the entire screen.

Exit full screen mode

This exitFullscreen method (which also requires the browser prefix) will cause the browser to exit full-screen mode and change to normal mode.

The code is as follows:

// 判断浏览器种类
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
// 退出全屏模式!
exitFullscreen();

It should be noted that exitFullscreen can only be called by the document object, not the object passed in when starting full screen.

Full screen properties and events

Unfortunately, the fullscreen properties and related methods of the event also require the browser prefix to be added, but I believe this will not be necessary soon.

1.document.fullScreenElement: Web page element displayed in full screen.
2.document.fullScreenEnabled: Determine whether it is currently in full screen state.

The fullscreenchange event will be triggered when full screen is started or full screen is exited:

The code is as follows:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

You can still use the method above to determine the browser type to prefix this event.

Full screen style CSS

Various browsers provide a very useful CSS style rule for full screen mode:

The code is as follows::

-webkit-full-screen {

 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

In some cases, WebKit styles can cause problems, and you'd better keep these styles simple.

These full-screen APIs are super simple and super useful. I first saw this API in MDN's BananaBread demo. It was a shooting game that just needed to be full-screen. It used event listening to detect the full-screen state. Remember these useful APIs and you can use them when needed.