如何让这个HTML5全屏功能在Firefox中运行？ [英] How can I get this HTML5 fullscreen function working in Firefox too?

问题描述

我想要一个使用HTML5全屏API触发全屏模式的按钮。我在网络上关注了一些示例以获取下面的代码，但它仅适用于Safari / Chrome，因为它是特定于webkit的前缀。我想使用moz前缀（以及标准HTML5）也可以在Firefox中使用，但我不知道如何去做。有什么建议吗？

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

推荐答案

你可以尝试这样的事情：

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

这篇关于如何让这个HTML5全屏功能在Firefox中运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！