CODEWITHSUNDEEP
javascripthtmldom
drew010
drew010

Reputation: 69937

Updating query parameters to Flash object using JavaScript

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?

Upvotes: 0

Views: 581

Answers (2)

drew010
drew010

Reputation: 69937

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);

Upvotes: 0

Yevgeny Simkin
Yevgeny Simkin

Reputation: 28349

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).

Upvotes: 1

Related Questions