让全屏API代码跨浏览

-1

在我的网页我有下面的代码，我至极用于补充一些反对全屏一个让全屏API代码跨浏览

<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的知识欠佳，不能自己做。

来源

2017-01-20 Ted

您可以使用它。参考：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"); 
 
     } 
 

 
    }

一次编写功能之后，你只需要点击事件处理程序内调用的..

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

来源

2017-01-20 16:59:26

很抱歉，但我有不知道我应该在哪里通过你的代码，以及如何使它工作。我给出我的代码片段的原因 - 因为我已经找到了如何使它工作。通过点击具有.fs-button类的按钮，我们使#fullscreen id全屏显示对象。我需要的只是添加到我的代码中的其他行以使其适用于所有浏览器。是的，我完全不知道JS。 – Ted

结帐修改！ :) –

感谢您的帮助！ – Ted

让全屏API代码跨浏览

回答

相关问题