<object> alternate content containing a script tag won't document.write in IE

Question

I'd like to display a Flickr badge as alternate content when a user doesn't have Silverlight installed to display my Flickr Silvrlight App. This works in Firefox, but not in IE:

<object width="100%" height="100%" type="application/x-silverlight-2" data="data:application/x-silverlight-2," id="SilverlightObject">
    <param value="/ClientBin/FlickrSilverlightApp.xap" name="source"/>   
    <param value="2.0.31005.0" name="minruntimeversion"/>
    <!-- Flickr Photos -->
    <div id="flickrbadge">
        <h3 class="subheading">Flickr Photos<a target="_blank" href="http://www.flickr.com/photos/tags/monkey/"&gt;View All</a></h3>
  <script src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;amp;display=latest&amp;amp;size=s&amp;amp;layout=x&amp;amp;source=all_tag&amp;amp;tag=monkey" type="text/javascript"></script>
 </div>
</object>

The h3 tag content is being displayed, but the Flickr badge isn't. I looked at what the Flickr badge code does. It's nothing fancy, but it does document.write some content. Does IE not support document.write inside an tag? If not, how should I work around it?

Answer 1

Shouldn't it be <script src="..."></script>?

Answer 2

There are some details on document.write in scripts here. I realize that this particular script is outside of your control, but it might shed some light on why you see the difference in the behavior.

I tried the badge link you have on IE and it didn't generate proper fragment until I decoded the &amp; to &.

There are some differences on how content is processed between HTML and XHTML. Check to see if your page is being delivered as XHTML to FF and as HTML to IE. Though, this affects only the content and should not have any effect on scripts using src attribute.

For IE, you might want to try the defer attribute. Though, it's IE-specific, and I don't know if other browsers will ignore it or barf on it.

Add a to cover the case where the user has JS disabled. I don't think that's your problem, but it's a good thing to add.

Answer 3

Maybe you should reverse the problem? Instead of having the Flickr badge inside of your object tag, you should replace the object tag with your Flickr badge src link if the user doesn't have Silverlight installed?

(using jQuery for brevity)

$(document).ready(function() {
  if(!Silverlight.IsInstalled()) {
     $("#SilverlightObject").replaceWith("<div id="flickrbadge"><h3 class="subheading">Flickr Photos<a target="_blank" href="http://www.flickr.com/photos/tags/monkey/"&gt;View All</a></h3><script src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;amp;display=latest&amp;amp;size=s&amp;amp;layout=x&amp;amp;source=all_tag&amp;amp;tag=monkey" type="text/javascript"></script></div>");

})

Of course, rather than having the big long string, you could just put the Flickr badge div+content on the page with display:none set and then grab it from the DOM and insert it where you want it. The downside to that is that the script will download and execute even if you don't use it, causing extra requests to be made.