Load a SWF Using a JavaScript Onclick Event

SWFObject's default behavior is to load a SWF when the DOM is ready. Sometimes you might wish to embed a SWF when a user clicks a link or performs some other action. There are a number of ways to handle this; here is a simple example to get you started.

  1. Create the link in your markup, then add an onclick 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="/path/to/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="/path/to/mymovie.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.

Demos: Load a SWF using an onclick event | Load the JW FLV Player using an onclick event

Replacing a loaded SWF with another SWF

This is a slightly trickier proposition than it seems!  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, SWFObject 2 includes a new method named swfobject.removeSWF(); this method removes all traces of the embedded SWF, eliminating the memory leak issue.

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

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

swfobject.embedSWF and swfobject.createSWF will turn it into this:

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

swfobject.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);
   }
}

Demo: Replace a loaded SWF with another one

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!