Adding a fallback image for a swf in IE8 and lower using createElement?

I’m creating a script that’s supposed to create an embedded SWF and also use a image as fallback if the user doesn’t have Flash available. Since I’m not allowed to use any other libraries like SWFobject I’m stuck using DOM-techniques like createElement/appendChild/setAttribute.

I’ve been using this great blog post: http://pipwerks.com/2011/05/30/using-the-object-element-to-dynamically-embed-flash-swfs-in-internet-explorer/ as a guideline, and I have Flash up and running in all the browsers I’ve tested, but it does not include any solution to how I can inject an link/image-combo into the object in Internet Explorer 8.

  • Should I wait for DOMContentLoaded event if I place a script ag at the end of a body tag
  • Inserting a Div Into another Div?
  • ParentNode and previousSibling in JavaScript
  • Is setting element.id as a side effect bad practice?
  • What type of objects are the DOM objects?
  • DOM implementation in pure javascript?
  • Using createElement(“a”) and likewise for an image and adding that to any other Div-element works fine, but if I try to inject that into the object MSIE8 throws “Invalid Argument”.

    I also tried creating a bogus param with an id and tried to replace that with my link/image combo and that works in the other browsers I’ve tested but not in IE8. Any thoughts on this would be much appreciated.

    This is my code (I’m using a combo of js and PHP to create the script):

    var alink = document.createElement("a");
    alink.setAttribute("href", "URL_TO_TARGET_SITE_OR_CLICK_COUNTER");
    
    var alinkImage = document.createElement("img");
    alinkImage.setAttribute("src", "URL_TO_IMAGE");
    alinkImage.setAttribute("alt", "");
    alinkImage.setAttribute("width", "IMAGE_WIDTH");
    alinkImage.setAttribute("height", "IMAGE_HEIGHT");
    
    alink.appendChild(alinkImage);
    
    if(!IE8) {
        flashObject.appendChild(alink);
        document.getElementById('ad_filler_placeholder').appendChild(flashObject);
    } else {
        /* this code will be executed if IE8 or lower, sadly appending alink into flashobject fails */
        flashObject.appendChild(alink);
        document.getElementById('ad_filler_placeholder').appendChild(flashObject);
    }
    

  • How do I use window.fetch() with httpOnly cookies or basic auth
  • jQuery - How to convert a jQuery object to the kind of object returned w/ getElementById
  • Duplicate id within noscript
  • Change font after createTextNode()
  • Dojo Query by ID defaulting to getElementById
  • Why would jquery return 0 for an offsetHeight when firebug says it's 34?
  • One Solution collect form web for “Adding a fallback image for a swf in IE8 and lower using createElement?”

    Ok, so i had to tweak my script abit to match the end result as stated in pipwerks’ blogg post. While checking for IE i declared the flashObject with innerHTML like this:

    var fallback=false;
    
    flashObject = (isIE) ? createIeObject() : document.createElement("object");
    
    if(!isIE) {
       flashObject.setAttribute("type", "application/x-shockwave-flash");
       flashObject.setAttribute("data", "URL_TO_SWF");
       fallback = true;
    }
    

    the createIeObject-function does this:

    function createIeObject(){
       var div = document.createElement("div");
       div.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'><param name='movie' value='URL_TO_SWF'><a href='URL_FOR_CLICK'><img src='URL_TO_FALLBACK_IMAGE' alt='' width='WIDTH' height='HEIGHT' border='0' /></a></object>";
       return div.firstChild;
    }
    

    Note that I added the fallback within this segment. And I also had to use width, height and border on the image, or else IE will add an annoying blue border around everything. OK, will everything work as I planned..? Of course not =) IE8 (maybe also other versions) cannot append any child to the div I initially created using document.write, since the DOM is not fully loaded at that state. This could be solved wrapping the whole (almost) thing in this:

    onload = function(){}
    

    I did try it through DFP and it works from at least IE7 and above. The other good guy-browsers gets their fallbakc added through regular appendChild as stated in the original question, I just moved it within the if-statement since it’ll be obsolete if IE.