Updating query parameters to Flash object using JavaScript

Question

I have the following simple object embed for Flash:

<object id="siwp_obj"
        type="application/x-shockwave-flash" 
        data="button.swf?file=%2F/ex.php?id=89804c7326e92a00c5c88c181190af8159cf060b"
        height="32" width="32">
    <param id="siwp_param" name="movie"
           value="button.swf?file=%2F/ex.php?id=89804c7326e92a00c5c88c181190af8159cf060b" />
</object>

What I want to do is replace the id parameter with a new ID that is generated by the browser.

I've tried this, which works in Firefox but not in Chrome or IE9. Firefox successfully updates the parameters so the Flash object references the new ID, but Chrome and IE9 don't update ID, or result in any script errors or warnings.

var cid = "randomstring";
var obj = document.getElementById('siwp_obj');
// get the "data" attribute which contains the URL with an old id to replace
obj.setAttribute('data', obj.getAttribute('data').replace(/[a-zA-Z0-9]{40}$/, cid));

obj = document.getElementById('siwp_param');
obj.value = obj.value.replace(/[a-zA-Z0-9]{40}$/, cid);

I'm trying to assume no javascript libraries are available since this will be used in a plugin system.

Does anyone have any ideas on how to update the URLs for the object and param tag dynamically?

EDIT:

In Chrome, I did some debugging and noticed that the parameter is being updated, but when I interact with the flash, it hasn't been reloaded.

For example:

var obj = document.getElementById('siwp_obj');
alert(obj.getAttribute('data')); // the old URL with old ID
obj.setAttribute('data', obj.getAttribute('data').replace(/[a-zA-Z0-9]{40}$/, cid));
alert(obj.getAttribute('data')); // the new URL with new ID

...But when I click on the flash object to try to stream from the new URL, it still refers to the old URL with the old ID. So the DOM is being updated, but the browser is then missing the fact that some parameters to the object have changed. Any thoughts?

what if you add quotes around cid assignment? var cid = "<new random id:40>" — Fabrizio Calderan
– Fabrizio Calderan, Commented Apr 24, 2012 at 7:40
That was just an example, but it is a string within quotes. I updated it to be less confusing. — drew010
– drew010, Commented Apr 24, 2012 at 7:42
@BibinVelayudhan Preferably not, as it will be used on many sites some which will not have any JS library installed. Also I'd prefer not to have to replace the whole tag, just the small part. — drew010
– drew010, Commented Apr 24, 2012 at 15:40

Yevgeny Simkin · Accepted Answer · 2012-04-24 21:31:38Z

1

I believe the best thing to do is to create the entire element dynamically (rather than approach it as a getElementById() after it's been loaded to the page.

So, document.createElement("object"); as well as document.createElement("param") then add all the attributes and then appendChild() it to some parent node... I believe that should work (though I haven't tested it).

answered Apr 24, 2012 at 21:31

Yevgeny Simkin

28.6k41 gold badges145 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

drew010 · Accepted Answer · 2012-04-27 01:48:52Z

I was able to get it working by updating the dom elements, and then creating a clone and replacing it in the document.

This works in IE6+, Firefox, and Chrome (haven't tested in any others yet).

// update object and param tag with new id
var obj = document.getElementById('siwp_obj');
obj.setAttribute('data', obj.getAttribute('data').replace(/[a-zA-Z0-9]{40}$/, cid));
var par = document.getElementById('siwp_param'); // this was a comment...
par.value = par.value.replace(/[a-zA-Z0-9]{40}$/, cid);

// replace old flash w/ new one using new id
// clone the original object tag and then insert the clone, remove the original
var newObj = obj.cloneNode(true);
obj.parentNode.insertBefore(newObj, obj);
obj.parentNode.removeChild(obj);

Collectives™ on Stack Overflow

Updating query parameters to Flash object using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related