How to detect browser supports requestFullscreen

How to determine whether the browser supports requestFullscreenor not?

I have these codes below to make chrome, safari, firefox and opera (not quite working) to make a full-screen document, but I want the browser to support requestFullscreenor not. What should I do?

 $('.button-fullscreen').click(function(){ 

    var docElm = document.documentElement;

    // W3C Proposal
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }

    // mozilla proposal
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();          
    }

    // Webkit (works in Safari and Chrome Canary)
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen(); 
    }

    return false;
});

$('.button-sound').click(function(){               

    // W3C Proposal
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }

    // mozilla proposal
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }

    // Webkit (works in Safari and Chrome Canary)
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }

    return false;
});
+1
source share
2 answers

Use the modernizr framework to avoid testing for n vendor prefixes ...

Modernizr.prefixed('requestFullscreen', document.documentElement)
+1
source

When you put if (docElm.requestFullscreen), you find out if the browser supports this method, because it will return true if requestFullscreendefined in the object docElm.

+2

Source: https://habr.com/ru/post/1534945/


All Articles