CODEWITHSUNDEEP
jqueryfullscreen
Run
Run

Reputation: 57176

how to detect a browser supports requestFullscreen

How can I detect a browser supports requestFullscreen or not?

I have these codes below to make chrome, safari, firefox, and opera (not entirely working) to make a document fullscreen, but I want to detect the browser supports requestFullscreen or 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;
});

Upvotes: 3

Views: 2893

Answers (3)

user128511
user128511

Reputation:

Extracting the ideas from screenful this seems to work

  const canFullscreen = (function() {
    for (const key of [
        'exitFullscreen',
        'webkitExitFullscreen',
        'webkitCancelFullScreen',
        'mozCancelFullScreen',
        'msExitFullscreen',
      ]) {
      if (key in document) {
        return true;
      }
    }
    return false;
  }());


  if (canFullscreen) {
    // supported
  } else {
    // not-supported
  }

note: for my purposes I didn't need a library to do fullscreen. I just needed code to detect if it's possible as I'm using some other library that goes can go fullscreen but I needed to know whether or not to display the an option to go fullscreen to then call into that library. In other words, if canFullscreen show button, else don't.

Upvotes: 1

offthat
offthat

Reputation: 400

When you put if (docElm.requestFullscreen), you are detecting if the browser supports that method because it will return true if requestFullscreen is defined on the docElmobject.

Upvotes: 3

bastos.sergio
bastos.sergio

Reputation: 6764

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

Modernizr.prefixed('requestFullscreen', document.documentElement)

Upvotes: 3

Related Questions