Html5 Fullscreen Api Toggle With Javascript

I am trying to make a button that would toggle (on/off) HTML5 fullscreen on a certain website. After reading plenty of documentation, it appears there still are some inconsistencie

Solution 1:

functiongoFullScreen() {
  const el = document.documentElement,
      rfs = el.requestFullScreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen

  rfs.call(el)
}

document.querySelector('#full-screen-button')
  .addEventListener('click', () => {
    goFullScreen()
  })

Keep in mind that requesting fullScreen needs to be done via a user-triggered event such as a click event - mousedown,mouseup etc..

Solution 2:

Changing the 1st line of _isFullScreen function to

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;

Does the trick (at least for Firefox, Chrome and Safari on Mac and Windows)

Solution 3:

Based on what I found on Mozilla's Developer Network the function for Webkit is actually spelt slightly different.

document.webkitRequestFullscreen with a lowercase "s" for screen.

And from W3 spec, it is meant to be with a lowercase "s".

On the MDN link they say:

Note: The specification uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. The implementation described here and other prefixed implementations may use a capital 'S'.