How can I get this HTML5 fullscreen function working in Firefox too?

问题

I want to have a button that will trigger fullscreen mode using the HTML5 fullscreen API. I followed some examples around the web to get the code below, but it only works in Safari/Chrome as a result of the webkit-specific prefixes. I want to use the moz prefixes (and the standard HTML5 ones too) to make this work in Firefox also, but I'm not sure how to go about doing that. Any advice?

HTML:

<div id="viewer">
     <a href="#" class="fullscreen">Exit/enter fullscreen mode</a>
</div>

JS:

$('.fullscreen').on('click', function(){
     var elem = document.getElementById('viewer');
     if (document.webkitFullscreenElement) {
          document.webkitCancelFullScreen();
     } else {
          elem.webkitRequestFullScreen();
     };
});

回答1:

You can try something like this:

var cancelFullScreen = document.cancelFullScreen 
  || document.webkitCancelFullScreen
  || document.mozCancelFullScreen 
  || document.msCancelFullScreen;

var requestFullScreen = document.requestFullScreen 
  || document.webkitRequestFullScreen
  || document.mozRequestFullScreen 
  || document.msRequestFullScreen;

$('.fullscreen').on('click', function(){
  var elem = document.getElementById('viewer');
  var fullscreenElement = document.fullscreenElement 
    || document.webkitFullscreenElement
    || document.mozFullscreenElement 
    || document.msFullscreenElement;

  if (fullscreenElement) {
    cancelFullScreen.call(document);
  } else {
    requestFullScreen.call(document);
  };
});

来源：https://stackoverflow.com/questions/20326489/how-can-i-get-this-html5-fullscreen-function-working-in-firefox-too