brandonmartinez

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:

<div class="container">
	<object
		type="application/x-shockwave-flash"
		data=""
		data-bind="attr: { data: DataUrl }"
		codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0">
		
		<param name="movie" data-bind="attr: { value: DataUrl }" />
		<param name="allowfullscreen" value="true" />
		<param name="wmode" value="transparent" />
		
		<embed
			data-bind="attr: { src: DataUrl }"
			type="application/x-shockwave-plugin"
			pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
		</embed>
	</object>
</div>

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!

<script type="text/html" id="my-plugin">
	<object
		type="application/x-shockwave-flash"
		data=""
		data-bind="attr: { data: url }"
		codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0">
		
		<param name="movie" data-bind="attr: { value: url }" />
		<param name="allowfullscreen" value="true" />
		<param name="wmode" value="transparent" />
		
		<embed
			data-bind="attr: { src: url }"
			type="application/x-shockwave-plugin"
			pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
		</embed>
	</object>
</script>

<div class="container" data-bind="template: { name: 'my-plugin', data: DataUrl, as: 'url' }"></div>

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.

  • Vijay

    Would like to know why you used as: ‘url’
    I am using Durandal framework to load applet.

Copyright © 2006 – 2014, Brandon Martinez. All rights reserved. A Martinez Media site.