[Go] JavaScript controls the browser full screen and various browser full-screen mode methods, properties and events

[From] http://www.jb51.net/article/76695.htm

The full screen in HTML 5 can now be used in browsers other than IE and opera, and sometimes it is useful to make fullscreen APIs, games, and so on. See the Common API first

Element.requestfullscreen ()

Function: Request an element full screen

document.getElementById ("MyCanvas"). Requestfullscreen ()

This is where the element ID goes 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 that is currently in full-screen mode

The following code is to turn on full screen mode:

123456789

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

The following code is the entire page called Full screen mode

But to be honest, there's a problem with full screens, which can easily lead to deception, such as
http://feross.org/html5-fullscreen-api-attack/, where there is a good demo, to cheat, such as a link is written by http://www.bankofamerica.com, People thought it was Bank of America, a little in, because using the full-screen API, it would deceive people

123456789101112131415161718

$(‘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();  });

Here is a description of how JavaScript controls the full-screen mode of various browsers, properties, and events

Browser full-screen mode of the startup function Requestfullscreen still need to accompany the browser's JS dialect prefix, I believe that the following code requires you to spend a lot of search to get together:

The code is as follows:

123456789101112131415

// 判断各种浏览器，找到正确的方法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")); // 某个页面元素

When you call the full-screen method for a page element that you want to display in full screen, the browser window becomes full screen, but the user is asked to allow full screen mode first. Be aware that users will most likely reject full-screen mode. If the user runs full-screen mode, the buttons menu such as the browser's toolbar will be hidden and your page will cover the entire screen.

Exit Full Screen mode

This Exitfullscreen method (which also requires a browser prefix) will let the browser exit full-screen mode and become normal mode.

The code is as follows:

123456789101112

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

It is important to note that Exitfullscreen can only be called by the Document object, not the object that is passed in when the full screen is started.

Full-screen properties and events

Unfortunately, the related methods of full-screen properties and events also require a browser prefix, but I'm sure it won't be necessary soon.

1.document.fullscreenelement: A page element that is displayed in full screen.
2.document.fullscreenenabled: Determines whether the current is in full-screen mode.

The Fullscreenchange event is triggered when the full screen is started or when the full screen is exited:

The code is as follows:

12	varfullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;varfullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

You can still prefix this event with a method of judging the browser type above.

Full-screen style CSS

Various browsers provide a very useful full-screen mode when the CSS style rules:

The code is as follows:

12345678910111213141516171819202122232425262728

-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, there are some problems with the WebKit style, so you'd better keep these styles simple.

These full-screen APIs are super simple and super useful. The first time I saw this API in MDN's Bananabread demo, it was a shooting game that just needed fullscreen, and it used event snooping to detect full-screen status. Remember these easy-to-use APIs that can be easily picked up when needed.

[Go] JavaScript controls the browser full screen and various browser full-screen mode methods, properties and events