制作全屏API代码crossbrowser

Question

在我的页面上，我有以下代码，我用它来制作一些全屏幕对象

    <script>
    $(document).ready(function(){
    $('.fs-button').on('click', function(){
    var elem = document.getElementById('fullscreen');
    if (document.webkitFullscreenElement) {
    document.webkitCancelFullScreen();
    } else {
    elem.webkitRequestFullScreen();
    };
    });
    });
    </script>

问题是它仅适用于Chrome。你能给我这个代码的crossbrowser版本吗？由于JS知识不足，我自己不能这样做。

Answer 1

你可以用它。 参考：https://msdn.microsoft.com/en-us/library/dn265028(v=vs.85).aspx

＆＃13;

＆＃13;

    // Initiated by a user click on an element 

    function makeFullScreen(divObj) {
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }

＆＃13;

＆＃13;

＆＃13; 在编写该函数之后，您只需要将单击事件处理程序调用为..

＆＃13;

＆＃13;

$(document).ready(function(){
    $('.fs-button').on('click', function(){
      var elem = document.getElementById('fullscreen');
        //call that function to make it fullscreen.
        makeFullScreen( elem );
    });
});

＆＃13;

＆＃13;

＆＃13;