Check if URL() suported

Question

How to check if the class URL() is supported in the current browser? Based on the docs it's not supported in IE

I want to use it to get a domain out of a string like that:

var text = ...
var domain = new URL(text).host;

Possible duplicate of [JavaScript check if variable exists (is defined/initialized)](http://stackoverflow.com/questions/5113374/javascript-check-if-variable-exists-is-defined-initialized) — RyanZim, Mar 09 '17 at 15:54

Daniel A. White · Accepted Answer · 2017-03-09T16:02:10.347

5

You could do a feature check with

if ("URL" in window)

However this won't validate whether the functionality is correct. you might want to consider adding a polyfill.

Note that IE/Edge seem to really make built in constructors as objects, meaning typeof Ctor === "object" is true in those browsers. So if they add support in Edge for it, the checks for "function" will be invalid.

edited Mar 09 '17 at 16:02

answered Mar 09 '17 at 15:52

Daniel A. White

187,200
47
362
445

it just says that window has URL property. window.URL= "nop" and it is not working anymore – Guilherme Ferreira Mar 09 '17 at 15:59
1

@GuilhermeFerreira thats a risk with anything in javascript. – Daniel A. White Mar 09 '17 at 16:01
@DanielWhite There is many ways to make it less true. You could have checked if the URL is a function, for example. It is a step into making sure – Guilherme Ferreira Mar 09 '17 at 16:09
1

@GuilhermeFerreira `window.URL = () => null` and, voila, it's broken again. – Pavlo Mar 09 '17 at 16:13
@Pavlo Like i said, it was an example, and it was just one step further making sure. Check my isURLSupported method. – Guilherme Ferreira Mar 09 '17 at 16:18

score 2 · Answer 2 · answered Mar 09 '17 at 15:58

You can't do this with complete reliability. You could come close by testing if URL exists and is a function:

if (typeof URL !== "function") {
     // It is not supported
}

You could then perform further tests to see how much it looks like a duck:

function URL_is_supported() {
    if (typeof URL !== "function") {
        return false;
    }
    // Beware: You're calling the function here, so it it isn't the expected URL function it might have undesired side effects
    var url = new URL("http://example.com");
    if (url.hostname !== "example.com") {
        return false;
    }
    // and whatever other tests you wanted to do before you're convinced
    return true;
}

@DanielA.White — A smart polyfill would do something like this in order to determine if it needs to activate itself. — Quentin, Mar 09 '17 at 16:06

score -1 · Answer 3 · edited May 23 '17 at 12:09

to check if anything is supported on a root level (window) just try to access it on a condition level. E.G.

(window.URL) OR JUST (typeof URL === "function")

var a = window.URL ? window.URL(text).host : ....

also remembering that the fact of window has a "URL" property doesn't mean that it is a class/function and that it is what you expect so the best approach would be check using the typeof version which at least guarantee that it is a function

The closest you can get to check if URL is truly supported is checking its prototype and static functions

function isURLSupported(){
    if(typeof window.URL!=="function" || typeof URL.createObjectURL !== "function" || typeof URL.revokeObjectURL !== "function"){
        return false;
    }
    var oURLprototype= ["host","hostname","href","origin","password","pathname","port","protocol","search","searchParams","username"];
    for(var i=0;i<oURLprototype.length;i++){
        if(URL.prototype.hasOwnProperty(oURLprototype[i])===undefined){
            return false;
        }
    }
    return true;
}

For those who will support implementations that have classes as type Object not Function --Is function credit to https://stackoverflow.com/a/7356528/835753

function isFunction(functionToCheck) {
    var getType = {};
    return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
function isURLSupported(){
    if(!isFunction(window.URL) || !isFunction(URL.createObjectURL) || !isFunction(URL.revokeObjectURL)){
        return false;
    }
    var oURLprototype= ["host","hostname","href","origin","password","pathname","port","protocol","search","searchParams","username"];
    for(var i=0;i<oURLprototype.length;i++){
        if(URL.prototype.hasOwnProperty(oURLprototype[i])===undefined){
            return false;
        }
    }
    return true;
}

It won't … now you've completely rewritten the answer. It's rather disingenuous to imply that my comment was simply wrong. — Quentin, Mar 09 '17 at 16:24
No, your comment was tottaly right. And based on it i fixed. Simple. Don't know why you removed it — Guilherme Ferreira, Mar 09 '17 at 16:26

Check if URL() suported

3 Answers3