Question

I am trying to display some html embedding a SWF object using javascript.

The script works fine without the SWF object. Howevever, when the object is included in the html inserted into the div the script no longer runs.

If anyone can suggest fix or spot error, I would greatly appreciate it.

Here is jsfiddle.

http://jsfiddle.net/UJpQ4/

Code (same as jsfiddle):

html:

<a href="javascript:void(0)" onclick="takeProfilePic('0');">Show Flash</a>
<a href="javascript:void(0)" onclick="takeProfilePic('1');">Do not show flash</a>
<tr><td colspan=2 align="center"><div id="takepic"></div>

javascript:

function takeProfilePic(type) {
//   alert(type);
if (type==0)
  {
   var target = 'takepic';
   var photo = '<tr><td colspan=2 align="center">hello</td></tr>';
document.getElementById(target).innerHTML = photo;
return false;
  }
    else if (type==1) {
        var target = 'takepic';
   var photo = '<tr><td colspan=2 align="center"><a href="stepthree.php"><img src="images/collapse.gif" border=0></a></td></tr><tr><td colspan=2 align="center">NO FLASH OBJECT HERE</td></tr>';
  document.getElementById(target).innerHTML = photo;
return false;      
    }     
}

Answer 1

Use EMBED tag instead of OBJECT tag.

function takeProfilePic(type) {
//   alert(type);
if (type==0)
  {
   var target = 'takepic';
   var photo = '<tr><td colspan=2 align="center"><a href="stepthree.php"><img src="images/collapse.gif" border=0></a></td></tr><tr><td colspan=2 align="center"><div id="piccontent"><embed src="file.swf" type="application/x-shockwave-flash" width="520" height="400" /></div></td></tr>';
   document.getElementById(target).innerHTML = photo;
   return false;
  }
  else if (type==1) {
   var target = 'takepic';
   var photo = '<tr><td colspan=2 align="center"><a href="stepthree.php"><img src="images/collapse.gif" border=0></a></td></tr><tr><td colspan=2 align="center"><div id="piccontent">NO FLASH OBJECT HERE</div></td></tr>';
   document.getElementById(target).innerHTML = photo;
   return false;      
  }     
}