Greasy Fork

How To Deal With Browser Inconsistencies?

Recently I wanted to add full-screen functionality to one of my scripts. Sadly I found out that different browsers have different naming schemes for the functions. See: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing

So I'm here to ask if there's any really elegant way to still use the Fullscreen API cross-browser. This is the best I've come up with so far:

function skipBrowserInconsistencies(object, properties) {
    for (var property of properties) {
        if (object[property] !== undefined) {
            return object[property];
        }
    }
    throw new Error("Browser does not have any: " + properties.join(", "));
}
var fullscreen = skipBrowserInconsistencies(document.body,
        ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen"]
        ).bind(document.body);
var exitFullscreen = skipBrowserInconsistencies(document,
        ["exitFullscreen", "webkitExitFullscreen", "mozCancelFullScreen"]
        ).bind(document);
var isFullscreen = function() {
        return skipBrowserInconsistencies(document,
        ["fullscreen", "webkitIsFullScreen", "mozFullScreen"]);
};

Currently in the order of, standard, chrome, firefox.

AFAIK this is how it's done usually. Well, there might be a more concise version but the basic approach is the same.

As for code formatting, switch to markdown in the selector above the message text box and use code fe*n*ces ``</code> or~~~` on a separate line before and after the code:

~~~
code
~~~

Okay thanks :)