Nov142013

Knockout, Internet Explorer, and Object Tags

Today I ran into an interesting problem. I was dynamically changing an object tag's source (the data attribute) to load a different Flash file based on a user's selection. This was working beautifully in Chrome; however, in Internet Explorer it would load initially, but would never change with a user's new selection. Apparently, the data attribute cannot be changed after it's been initially set.

Here is a sample of the code I had directly in the HTML:

[html]

[/html]

As I mentioned, in Chrome changing the value of DataUrl on my Knockout.js ViewModel worked perfectly. The plugin would render with the new URL and continue onward. In IE, however, it would switch to a blank, empty container.

After some investigation, it appeared that if you removed the object tag from the DOM, and reinserted it, it would work fine. To get around this, I put the object into a named template, then rendered it. Chrome, worked. Internet Explorer, fixed!

[html]

\[/html\]

That causes Knockout to regenerate the entire DOM block, fitting Internet Explorer's requirement of a new object.

The solution wasn't terrible to implement, it was just a major head-scratcher; it's also interesting because I can't find any documentation validating this "functionality" in IE. If you have a reference, please let me know.