How to prevent resource from being loaded if ie10 and below?

Question

a bit of a specific question. I've been reading about how to target ie10 and below but really haven't found any concrete answer that works for my situation.

I'm using a framework for my website that does not support ie10 (google's polymer) very well so I have an alternate page set up for when the user is using ie10 and below. I'm running into the issue that when I open my webpage in ie10, the resource required to get polymer to run platform.js is causing so many errors that it's preventing the rest of my resources from loading somehow. platform.js is at the top of my loading order, and I'm not loading asynchronously. I'm trying to target ie10 in a js file that has to load underneath platform.js but my code isn't registering at all due to platform.js causing so many errors.

I am wondering if there is a way to only load platform.js if the browser is !ie10 while still putting it at the top of the load order. Ugh this is driving me insane. Even a link to where I can read about how to make my resources load only on certain events would be helpful. Thanks for any info!

Perhaps related: https://code.google.com/p/dart/issues/detail?id=19233 — David Thomas, Oct 08 '14 at 06:32
yeah I have read through that -- the updated version doesn't seem to help with the numerous errors at all. the errors are all related to using the operand 'instanceof', which ie10 seems to not understand — shan, Oct 08 '14 at 06:33
In which case I'd suggest using a test case to feature detect support for that operand (though I'll note that IE is supposed to understand [`instanceof`](http://msdn.microsoft.com/en-us/library/ie/zh0zb36z(v=vs.94).aspx), according to Microsoft, in Quirks mode and Standards mode, in IE6 and above). — David Thomas, Oct 08 '14 at 06:36
You're very welcome, I'm sorry I can't be of more immediate use. Best of luck! — David Thomas, Oct 08 '14 at 06:39

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

I finally figured out a way to do this using Mario's answer here, in case anyone in the future is interested:

I popped this at the start of the head in my index.html file:

<script>
    function detectIE() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        }

        if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        }

        // other browser
        return false;
    }

    // making sure it's working..
    console.log(detectIE());

    // this is important: if you just say <= 10 then it will also accept ZERO
    // and ZERO is = false, which makes good browsers like Chrome detect as IE
    if (detectIE() >= 1 && detectIE() <= 10) {
        console.log('this is below ie10');
    } else {
        // add my script for polymer
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/bower_components/platform/platform.js";

        //put it at the start of the head tag
        document.getElementsByTagName('head')[0].appendChild(script);
    }

</script>

I have noticed a tiny bit of lag sometimes when the website first loads, but it's not too bad. This will have to do until I get better at using stuff like Modernizr.

How to prevent resource from being loaded if ie10 and below?

1 Answers1