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?

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?

• javascript
• html
• css
• internet-explorer
• polyfills

Share Improve this question Follow edited Jan 23, 2014 at 10:12 gorn asked Jan 23, 2014 at 10:04 gorngorn 8,17755 gold badges3939 silver badges4747 bronze badges 2

• The clue is in the error message – ediblecode Commented Jan 23, 2014 at 10:07
• 6 The problem isn't with indexOf, the error message says that s.href is null or undefined. You need to figure out why that is. – Barmar Commented Jan 23, 2014 at 10:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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
    }
}