我如何才能让这个HTML5全屏功能在Firefox中也能工作

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

本文关键字：功能 Firefox 工作 HTML5      更新时间：2024-01-12

我想要一个按钮，可以使用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();
     };
});

您可以尝试以下操作：

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);
  };
});
相关文章：