使全屏 API 代码跨浏览器工作

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 中有效。你能给我这段代码的跨浏览器版本吗？由于 JS 知识不足，无法自己完成此操作。

Answer 1

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

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

    }

一旦写完那个函数，你只需要调用内部点击事件处理程序as..

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

使全屏 API 代码跨浏览器工作

Make fullscreen API code work cross browser

javascript

fullscreen