我怎样才能让这个 HTML5 全屏功能也在 Firefox 中工作？

Question

我想要一个使用 HTML5 全屏 API 触发全屏模式的按钮。我按照网络上的一些示例来获取下面的代码，但由于 webkit 特定的前缀，它只能在 Safari/Chrome 中工作。我想使用 moz 前缀（以及标准的 HTML5 前缀）也可以在 Firefox 中进行这项工作，但我不确定如何去做。有什么建议吗？

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

Answer 1

你可以试试这样的：

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);
  };
});