How to turn the following event listener into a vendor-specific listener?

Question

I'm using the following function to trigger an event if the user exits fullscreen while on landscape orientation:

document.addEventListener('webkitfullscreenchange', () => {
  if (util.isLandscape()) {
    console.log('EXITED')
  }
}, false)

I would like to add mozfullscreenchange and MS, etc...

How to build a function to achieve this?

Does this helps? [How to detect when a page exits fullscreen?](http://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen) — Hammer, Apr 14 '16 at 02:11

score 2 · Accepted Answer · answered Apr 14 '16 at 02:37

Simply (and naïve) approach could be:

document.addEventListener('mozfullscreenchange', fullScreenFunction, false)
document.addEventListener('webkitfullscreenchange',fullScreenFunction, false)
document.addEventListener('msfullscreenchange', fullScreenFunction, false)
//etc
function fullScreenFunction()
{
 if (util.isLandscape()) {
        console.log('EXITED')
      }    
}

or you could try testing which prefix exists and then only binding one event handle to which one exists.

Rough idea would be something like:

var prefixes = ['webkit', 'moz', 'ms', 'o'];
var prefixToUse = '';
for (var i = 0; i < prefixes.length; i++) {
//This checks against the document object for that event.
//It will start with on eg onmsfullscreenchange or onwebkitfullscreenchange
    if( 'on' + prefixes[i] + 'fullscreenchange' in document) {
        prefixToUse = prefixes[i];
        break;
    } 
}
document.addEventListener(prefixToUse + 'fullscreenchange', fullScreenFunction, false);

function fullScreenFunction()
{
    if (util.isLandscape()) {
        console.log('EXITED')
    }
}

How to turn the following event listener into a vendor-specific listener?

1 Answers1