Faire Fullscreen code API crossbrowser

Question

Sur ma page je code suivant, wich-je utiliser pour faire quelques objets de plein écran un

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

problème est son travail que dans Chrome. Pouvez-vous s'il vous plaît me donner la version crossbrowser de ce code? Je ne peux pas le faire moi-même à cause d'une mauvaise connaissance de JS.

Answer 1

Vous pouvez l'utiliser. Référence: 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"); 
 
     } 
 

 
    }

---

une fois après avoir écrit cette fonction, il vous suffit d'appeler à l'intérieur de gestionnaire d'événements, cliquez comme ..

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