Lab: SWFObject

SWFObject 2: Ajax examples

Here's a common scenario: A developer has two pages. SWF Page contains a SWF. The developer would like to load the contents of SWF Page into a div in the body of Ajax Page.

SWFObject 2 has two publishing methods (static and dynamic), which each require different ajax approaches.

Using ajax to load a page containing a static SWF (SWFObject 2 static publishing).

This is fairly easy to handle. The ajax page will load the markup contained in the target page. Since the target page contains a hard-coded (static publishing) SWF, ajax simply loads all of the page's markup, including the SWF's object elements. Be sure to use request.responseText in your xhr code.

Example: Ajax Page, which loads this SWF Page.

 

Using ajax to load a page containing a SWF embedded with SWFObject 2 dynamic publishing.

This method is much trickier because of xmlhttprequest's capabilities and limitations, namely that JavaScript events contained in the target page won't fire when the page content is loaded into the ajax page. Here's a simple example:

  • Page A contains a single line of text. The page also contains JavaScript designed to dynamically add a second line of text after the page loads. When loaded directly into a browser, the JavaScript executes normally and adds the second line of text to the page.
  • Page B loads Page A using xmlhttprequest. When Page A gets loaded into Page B, the second line of text -- the one generated by JavaScript in page A's onload script -- does not appear. This is because the JavaScript contained in Page A will not execute if the file is opened via xmlhttprequest.

This means that dynamically-embedded objects cannot be loaded into the ajax page when using xmlhttprequest. Page markup gets passed, and that's about it. Any JavaScript-generated content won't get passed. If you're trying to use xmlhttprequest to load a page that contains a dynamically-embedded SWF, you're out of luck. But you do have two alternatives worth exploring: iframes and SWFObject on the ajax page.

I won't bother to explain iframes here (you're just loading the SWF Page into an iframe).

Using SWFObject to dynamically embed the external SWF onto the ajax page is fairly straightforward, but is only viable if all you're looking for is the SWF itself, and not any other stuff contained in the SWF Page's HTML. Instructions for dynamic publishing can be found on the official SWFObject documentation page.

Extra example: Using xmlhttprequest to load XML data about a SWF, then use that data to load a SWF using SWFObject 2

If you want to push the boundaries a little more, you can use xmlhttprequest to load data about a SWF from an external XML file (including any variables that need to be passed into the SWF using flashvars). Here are the steps and an example:

  1. Create the page you'd like to load a SWF into (for this demo, "dynamic.html").
  2. Create the SWF, but don't embed it on any HTML pages (for this demo, "sample_flashvars.swf").
  3. Create an XML file containing the information needed for SWFObject, including any optional parameters you'd like to pass via FlashVars. This includes the SWF file path, width, height, minimum version of Flash, etc. (For this demo, "swfData.xml")
  4. Add an xmlhttprequest to the requesting page (dynamic.html). The xmlhttprequest will load the swfData.xml file, then we use a little bit of JavaScript to extract the data.
  5. When the data has been extracted, it's used to populate an instance of SWFObject, which is then used to write the SWF to the page.

I know it sounds complicated, but it isn't, I swear! :)

The finished result. Here's the source FLA if you're interested.