FireFox Hates My Simple Code

[PHilliP JoSh rookie]

function flash_insert()
{
  var flash_to_insert = '<object type="application/x-shockwave-flash" data="myflash.swf" width="980" height="130">';
  flash_to_insert = flash_to_insert + '<param name="movie" value="myflash.swf" />';
  flash_to_insert = flash_to_insert + '</object>';

  document.getElementById('flash_2').innerHTML = flash_to_insert;
}

.
.
.

<span id="flash_2"></span>

Hey y'all,

The code above works fine in IE7, Opera9, but NOT in Firefox. Why??

Thanks in advance.

[acoder]

Any errors?

If you include the HTML directly without JavaScript, does it work?

[PHilliP JoSh rookie]

Any errors?

If you include the HTML directly without JavaScript, does it work?

No errors in the (FF) console. The HTML content in the variable works when directly included in the HTML document.

The code works as expected in IE7 and Opera9, and what is interesting is that I suspect that the javascript is also working in FF, as there are no errors.

For example;

function flash_insert()
{
  var flash_to_insert = '<br /><a href="javascript:flash_insert();">hello</a>';

  document.getElementById('flash').innerHTML = flash_to_insert;
}

or;

function flash_insert()
{
  var flash_to_insert = '<p>hello</p>';

  document.getElementById('flash').innerHTML = flash_to_insert;
}

will work in all browsers, but this;

function flash_insert()
{
  var flash_to_insert = '<object type="image/gif" data="../images/frvcc.gif" style="width:98px; height:98px;">';
  flash_to_insert = flash_to_insert + '</object>';

  document.getElementById('flash').innerHTML = flash_to_insert;
}

won't work in FF. It seems as though FF won't show content associated with the <object> tag when inserted by JS.

This may not be a javascript problem after all, but more likely a FF issue.

Sorry if I'm in the wrong forum.

[acoder]

Instead of using innerHTML, have you tried document.create Element("object ") and setting attributes/children and appendChild()?

[PHilliP JoSh rookie]

Instead of using innerHTML, have you tried document.create Element("object ") and setting attributes/children and appendChild()?

AHA!! Yes, that works. I forgot that my web docs are being served by PHP, which by the way, as you know, can serve different header info to different browsers. I'm serving XHTML1.1 to FF, Opera and any other browser that can handle 'Content-Type: application/xhtml+xml'. IE cannot handle this type of doc, as I understand, so it is being served 'Content-Type: text/html.'

Now the javascript is not working for IE. Is it because IE cannot treat the doc as XML?

What can I do?

Thanks for your help, acoder.

[PHilliP JoSh rookie]

Maybe the code is the problem.

function flash_insert()
{
  var flash_to_insert = document.createElement('object');

  flash_to_insert.setAttribute('type','image/gif');

  flash_to_insert.setAttribute('data','../images/frvcc.gif');

  flash_to_insert.setAttribute('style','width:98px;height:98px;');

  document.getElementById('flash').appendChild(flash_to_insert);
}

[acoder]

IE unfortunately uses its non-standard createElement - see link. If you specify the whole HTML string, it'll work. Ugly!

[PHilliP JoSh rookie]

A sincere thanks to you, acoder, for pointing me in the right direction.

I've read the article from the link and it does seem a little ugly.

Since I usually serve up web pages with PHP, I decided to look for a solution using PHP.

What I did was to create code in PHP that selects a set of javascript code to be used when serving HTML, and a different set of javascript code when serving XHTML. Very little extra PHP was needed to link to the proper javascript file, but it did involve writing twice the amount of javascript to accomodate both scenarios.

UGLIER??

It works though, and it seperates the crossbrowser issues I've been having nicely, without much extra machine-cycle or (JS) file download time.

I can now;

1. Serve a web doc (HTML or XHTML, depending on the client) with flash content, without the 'Click to activate and use this control' pop-up, seen in Opera9.

2. Replace flash content dynamically on a web doc whether served-up as HTML or XHTML.

Being a rookie, I feel that I may have reinvented the wheel for no-good reason and there may be an easier solution out there.

Please comment on my rant.

Thanks again, acoder.

[acoder]

In my haste, I forgot about SWFObject (formerly FlashObject). That should handle all the cross-browser issues for you.

PS. just noticed what your user handle spells. Nice! :D