Lab: SWFObject

Using an 'onclick' event to dynamically load a SWF

This may seem like a no-brainer to long-time JavaScript developers, but the old SWFObject forum frequently had JavaScript novices asking for examples like these.

Here are some examples updated to use SWFObject 2.0.

Loading a SWF using an 'onclick' event.

This is a pretty straightforward task.

  1. Create the link in your markup, then add an onlick event that invokes a function we'll name "loadSWF" (you can use any function name you like).
  2. Add "return false;" to the onclick event to ensure the browser doesn't follow the link when it's clicked.
  3. Add a function named "loadSWF" to the JavaScript in your document's head.

The code in your head should look like this:

<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript">
function loadSWF(url){
  swfobject.embedSWF(url, "flashcontent", "550", "400", "7");

}
</script>

The code in your body should look like this:

<p><a href="/lab/_common/sample.swf" onclick="loadSWF(this.href); return false;">
   Click here to load the SWF!
</a></p>
<div id="flashcontent"></div>

Notice that the loadSWF function uses the href of the link as an argument. This is just one of many ways to write the function. You could also hardcode the URL if you prefer.

Working example (tested in IE6, FF2, and Safari 3.1 WIndows)
Extra example: Using an onclick event to load the JW FLV player

Using an 'onlick' event to replace a loaded SWF with another SWF

This is a slightly trickier proposition than it seems!  Apparently, loading and unloading multiple SWFs in the browser can lead to nasty memory leaks that can slow your computer down considerably. In an effort to address this issue, the SWFObject 2 team decided to implement a new method named removeSWF(); simply stated, this method removes all traces of the embedded SWF, eliminating the memory leak issue.

What's so tricky about using removeSWF you ask? Well, SWFObject 2 embeds SWFs by replacing the targeted element with an <object> element. removeSWF completely erases the <object> element from the page. So if you start with this:

<body>
<div id="flash"></div>
</body>

SWFObject's embedSWF and/or createSWF will turn it into this:

<body>
<object id="flash" ... > ... </object>
</body>

SWFObject's removeSWF will then leave you with this:

<body>
</body>

As you can see from the above code, you will need to recreate your original DIV whenever you use removeSWF, or else you will have no DIV to use with SWFObject. There are a gazillion ways to handle the situation, but here's one you might find helpful:

//Support function: checks to see if target
//element is an object or embed element

function isObject(targetID){

   var isFound = false;
   var el = document.getElementById(targetID);
   
   if(el && (el.nodeName === "OBJECT" || el.nodeName === "EMBED")){
   
      isFound = true;
   
   }
   
   return isFound;
}

//Support function: creates an empty
//element to replace embedded SWF object

function replaceSwfWithEmptyDiv(targetID){

   var el = document.getElementById(targetID);
   
   if(el){
   
      var div = document.createElement("div");
      el.parentNode.insertBefore(div, el);
 
      //Remove the SWF
      swfobject.removeSWF(targetID);
   
      //Give the new DIV the old element's ID
      div.setAttribute("id", targetID);
      
   }
   
}


function loadSWF(url, targetID){

   //Check for existing SWF
   if(isObject(targetID)){
   
      //replace object/element with a new div
      replaceSwfWithEmptyDiv(targetID);
      
   }
     
   //Embed SWF
   if (swfobject.hasFlashPlayerVersion("7")) {
   
      var attributes = { data: url, width:"550", height:"400" };
      var params = {};
      var obj = swfobject.createSWF(attributes, params, targetID);
   
   }
   
}

Working example (tested in IE7, FF3, and Safari 3.1 on WIn XP and FF3, Safari 3.1 and Opera 9.5 on OS X 10.5)