Avoid load entire page if browser is IE 8 or lower

Question

I have a problem with a webpage, at this moment I'm validating the browser version with something like this:

<!--[if lte IE 9]>
<div id="ie-compatibility">
   <h1>Your browser is out of date</h1>
</div>
<![endif]-->

That works but however the entire page is loaded (js libs, stylesheets, other divs, etc...), There is a way to don't load entire page when the condition exists? I just want to show a message and some images and nothing more on my ie-compatibility(as additional data I'm using AngularJS on my project).

Thanks for advance.

Answer 1

I'm not an Angular dev, but do a quick JS check on the IE version (see Best way to check for IE less than 9 in JavaScript without library) and act accordingly.

If you want to nix the page load right then and there, document.execCommand('Stop');. Otherwise, you could simply grab and remove elements from the dom that you don't want to be loaded if you manage to interject early enough in the load (of course depending on the number and size of http requests, this may not be super efficient).

Answer 2

Inserting this before any elements that load external content should do it.

<!--[if lte IE 9]>
    <script type="text/jscript">
        document.write(String.fromCharCode(60,33,45,45,32))
    </script>
<![endif]-->

You could even put your h1 warning before the script tag.

Note that your current condition (lte IE 9) includes IE 9 & below, not 8 & below. You may want just lt IE 9.

You could also reverse the logic and skip the headers for the older browsers:

<!--[if gte IE 9]-->
    … external style and script content …
<!--[endif]-->

Answer 3

If you are using jQuery you could write a script in that conditional to remove the default html and append your new html:

<!--[if lte IE 9]>
<script>
    $('body').empty().append([*new html*])
</script>
<![endif]-->