Control the browser full-screen events

Start function requestFullscreen browser full-screen mode still need to be accompanied js dialect prefix each browser


// judge the browser, find the right way to
function launchFullscreen (Element) {
  IF (element.requestFullscreen) {
    element.requestFullscreen ();
  } IF the else (element.mozRequestFullScreen) {
    element.mozRequestFullScreen ();
  } the else IF (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen ();
  } the else IF (element.msRequestFullscreen) {
    element.msRequestFullscreen ();
  }
}
// start fullscreen !
launchFullScreen (document.documentElement); // entire page
launchFullScreen (document.getElementById ( "videoElement") ); // a page element
You want a full-screen display of page elements invoke full-screen method, will become a full-screen browser window, but will first request the user to allow full-screen mode. Note that the user is likely to refuse to full-screen mode. If you run full-screen mode, the browser's tool bar menu and other buttons are hidden, your page will cover the entire screen.
Exit full screen mode


this exitFullscreen method (also need to add browser prefixes) will cause the browser to exit full-screen mode into normal mode.


// determines the type of browser
function exitFullscreen () {
  IF (document.exitFullscreen) {
    document.exitFullscreen ();
  } the else IF (document.mozCancelFullScreen) {
    document.mozCancelFullScreen ();
  } the else IF (document.webkitExitFullscreen) {
    Document. webkitExitFullscreen ();
  }
}
// exit full-screen mode!
exitFullscreen ();
Note that, exitFullscreen can only be called by the document object, not the object passed in full-screen at startup.


Full screen properties and events


Unfortunately, the full-screen attributes and methods related events also need to add browser prefixes, but I believe that will soon not need to do.


document.fullScreenElement: full-screen display of page elements.
document.fullScreenEnabled: determine whether the current state is in the full screen.
fullscreenchange event fires when you start a full-screen or exit full screen:


var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
you can still use the above method for determining the type of browser prefixed to this event.


CSS style fullscreen


various browsers provide a css style rule when a very useful full-screen mode:


: -webkit-Full-Screen {
  / * the Properties * /
}


: -moz-Full-Screen {
  / * the Properties * /
}


: -ms-Fullscreen {
  / * Properties * /
}


: {Fullscreen / pre-spec * * /
  / * Properties * /
}


: Fullscreen {/ * * spec /
  / * Properties * /
}


/ * * Deeper Elements /
: Full-Screen Video--webkit {
  width: 100%;
  height: 100%;
}


/ * * Styling The Backdrop /
:: Backdrop {
  / * Properties * /
}
: : -ms-Backdrop {
  / * the Properties * /
}
In some cases, WebKit style will be some problems, you'd better put these styles keep it simple.


Article Source: http: //www.weste.net/2014/4-4/96193.html