Detect IE10 or IE9 with a broken document all feature

27th October 2016
All posts

We were having an issue with certain iframes being treated differently on the front end in IE10 and below, not just IE9 and below so we needed a test to add a body class to any IE browser v.10 or below (this is something Modernizr doesn’t handle).

Hat tip to my good buddy Keith Flowers who showed me this one.

When the window is loaded a “document.all” is fired using jQuery. If this succeeds, you know you’re using IE10 or below. See MSFT’s documentation on this feature deprecation here. Keith discovered IE10 and below recognise “document.all” but support stopped here and this fact is unique enough to IE that we could use it to create a really focused test to target other things that don’t work well in IE10 and below.

The best reason to use this is anytime IE conditional queries aren’t advanced or broad enough. As IE8 and IE9 start going away, IE10 will then become the next IE6 – the browser no one wants to support but that keeps hanging around as people, mainly in big companies, are slow to change.

Here’s the solution:


var loadFired = false;
window.onload = function() {
loadFired = true;
var isIE10OrBelow = function() {
return document.all;
}
if (isIE10OrBelow()) {
$("body").addClass("ieIFrame");
} else {
$("body").addClass("noieIFrame");
}
};

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with Rails, Python, and ASP.net/Umbraco back end frameworks.