Detecting Success of Dynamic Embedding
Since SWFObject 2.x's dynamic publishing option uses an asynchronous domready/onload event, the default swfobject.embed
code won't return a boolean indicating whether the embed was successful. In most cases, this is no big deal. However, some developers rely on this 'success' boolean for determining whether they need to go to Plan B and present alternate HTML-based content or perhaps change their page's styling.
For instance, a developer may want to use AJAX to load HTML content if a SWF fails to load. A boolean indicating success would help him/her handle their custom DOM manipulation.
Thanks to SWFObject's flexible API, there are a couple of ways you can handle this situation.
Asynchronous approach: Use the Callback function
SWFObject 2.2 introduced a callback feature that allows you to invoke a custom function when a SWF is embedded. This function includes an event object that includes information about the embed's success or failure. Read more about the callback function.
Synchronous approach: Roll your own SWFObject method
If you're willing to forgo using swfobject.embed
(and it's automatic use of the domready event), you can roll your own custom embed script that will instantly return a boolean indicating the success of the embed attempt.
Here's a relatively simple example of how you can roll your own embed code. For convenience — and a clean global namespace — this example appends the new function to the swfobject
JavaScript object. Note that this function embeds the SWF as soon as the function is invoked, so it should not be used until after the DOM has finished loading.
swfobject.customEmbed = function (swfLoc, id, w, h, version, color){ if (swfobject.hasFlashPlayerVersion(version)){ var so = swfobject.createSWF({data:swfLoc,width:w,height:h}, {bgcolor:color},id); //swfobject.createSWF returns an HTML element, not a boolean if(so){ return true; } } return false; }
The custom embed function could be used like this:
var success = swfobject.customEmbed("mymovie.swf", "flashcontent", "550", "400", "10", "#FFF"); if(!success){ //embed failed! do something appropriate document.getElementById("flashcontent").innerHTML = "<p>SWFObject was unable to load the SWF!</p>"; }
If you want to run the script as soon as the DOM has loaded, you can simply invoke it using SWFObject's swfobject.addDomLoadEvent
function.
//Create the function swfobject.customEmbed = function (swfLoc, id, w, h, version, color){ if (swfobject.hasFlashPlayerVersion(version)){ var so = swfobject.createSWF({data:swfLoc,width:w,height:h}, {bgcolor:color},id); if(so){ return true; } } return false; } //Invoke the function once the DOM is ready swfobject.addDomLoadEvent(function (){ var success = swfobject.customEmbed("mymovie.swf", "flashcontent", "550", "400", "7", "#FFF"); if(!success){ document.getElementById("flashcontent").innerHTML = "<p>SWFObject was unable to load the SWF!</p>"; } });
Questions or Comments?
If you have questions or would like to point out an error, please post your remarks in the SWFObject Google Group. Thanks!