Unable to get value of the property 'indexOf'

Question

I'm using CSS multi-column layout (css3) which of course works fine in Chrome, FF and Safari. But many still use IE9 and we have a requirement to support it.

For IE support I include csscolumns polyfill js from this site.

When this polyfill loads in IE9 I get this error message in the console:

'unable to get value of the property 'indexof' object is null or undefined'

And the debugger highlights this code as the problem source:

function loadCssCache(s,callback){if(s.href.indexOf(location.host)==-1||s.href.indexOf(location.host)>50){return false}

And the code that calls loadCssCache is:

for (var i = 0; i < document.styleSheets.length; i++) {
    loadCssCache(document.styleSheets[i], "parseStylesheets")
}

s.href.indexOf is where it fails. Has anyone else run into this problem? Or may know what the problem can be?

Answer 1

The spec seems to indicate that inline stylesheets (the content contained within a style attribute) are included in the document.styleSheets list. The relevant part is probably this:

For inline style sheets, the value of this attribute is null.

So, if you have any style attributes on any elements, you're going to get a null-reference error when trying to read a value off .href.

A simple fix is to add a check for null:

function loadCssCache(s,callback){
    if(s.href == null || s.href.indexOf(location.host) == -1 || s.href.indexOf(location.host) > 50){
        return false
    }
}