Getting Highslide JS to assign an id to an iframe

After many days of working on a slick AJAX enabled video pop-up, I threw in the towel and decided to switch to using an iframe to call in the Flash video player. Ultimately, the end result is the same. The Ajax call was refusing to run the SWFObject which rewrites the div and embeds the Flash player. The window would open, but no video was present. The benefit of using SWFObject to embed the video far outweighs the benefit of using a true AJAX call for launching the videos. Iframe was the logical contingency.

The problem with using an iframe in Highslide was when the window was closed/hidden in IE, the video continues to play and the audio could be heard despite the fact that the video was not present. I tried various methods of rewriting the video div upon closing using getElementById, but these would end up breaking things when subsequent videos on the same page were played. I also tried reloading the iframe upon closing which would cause the video to stop playing, however since Highslide's instance of create.Element doesn't assign an ID, my efforts were met with further resistance by IE.

Ultimately, I ended up adding some code to highslide-html.js file telling it to assign an id to the iframe (~line 202, last line is my addition and assigns the iframe an id="videoframe") :


this.iframe = hs.createElement('iframe', { frameBorder: 0 },
{ width: this.objectWidth +'px', height: this.objectHeight +'px' },
this.objContainer);
this.iframe.id='videoframe'; // added to assign id


With this addition the Highslide generated iframe would now have an ID attribute which I could target with some simple DOM scripting telling the iframe to reload itself:


function reloadFrame() { // This reloads the iframe upon closing in order to stop video in IE
var objFrame = document.getElementById("videoframe");
objFrame.src = objFrame.src;
}


I trigger this event by appending it to the close text of my Highslide div. As the video is close the iframe is reloaded thus stopping the video from playing:



onclick="reloadFrame();return hs.close(this)



Now this code works for my purposes and gets around IE's quirky behavior. Ultimately, if you have multiple iframes you would need to assign them different IDs and would need to find a way to assign and pass the IDs dynamically. But hardcoding them in works for me.
•

Posted by: Sheldon Finlay on Aug 27, 07 | 4:45 pm | Profile