ExternalInterface not working in IE after page refresh

Question

I have a bizarre situation in IE where JS can't call up into flash using ExternalInterface after I hit "refresh". I know the movie is getting loaded and the code that does the ExternalInterface.addCallback() appears to be completing without any error

Here's a rundown of the steps to reproduce:

1. Open IE and load up the movie for the first time, the ExternalInterface callback methods are available to JavaScript.
2. If I hit refresh, the callback methods aren't available and I get the error Object doesn't support this property or method.
3. If I clear my cache and refresh the page, they are available again.
4. If I then hit refresh again without clearing my cache, they're unavailable.
5. If I close the browser and reopen, they're available again.

I've run into this situation before and I'm pretty sure that the extra delay required to download and instantiate the swf is what's allowing ExternalInterface to get set up properly. The way I worked around this before was to add a random number to the end of the swf's url, so that it's never used from cache, but that's not a real solution.

Does anyone know how to solve this?

edit:

I should have mentioned as well that after refreshing, 'ExternalInterface.available' is 'true', but 'ExternalInterface.objectId' is 'null'.

I've tried randomizing the value of the object id and embed name and the id of the container div and in every case, ExternalInterface.objectId remains null.

---

More info:

I can't see how the way I'm inserting the movie would make a difference, but I thought I would include the code just to be sure. My movie is not affected by the "click to activate" issue and I don't want to use SWFObject in this case since the flash movie is a fallback in case HTML5 audio is not available.

var docContainer = document.createElement('div');
docContainer.innerHTML = '<object '
        + 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '
        + 'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" '
        + 'id="mp3player" '
        + 'width="300" '
        + 'height="500">'
    + '<param name="allowScriptAccess" value="always" />'
    + '<param name="movie" value="mp3player.swf" />'
    + '<param name="quality" value="high" />'
    + '<param name="bgcolor" value="#ffffff" />'
    + '<embed ' 
        +'src="mp3player.swf" '
        + 'quality="high" '
        + 'bgcolor="#ffffff" '
        + 'width="300" '
        + 'height="500" '
        + 'swLiveConnect="true" '
        + 'name="mp3player" '
        + 'id="mp3player" '
        + 'allowScriptAccess="always" '
        + 'type="application/x-shockwave-flash" '
        + 'pluginspage="http://www.adobe.com/go/getflashplayer" />'
    + '</object>';
document.body.appendChild(docContainer);

Answer 1

In case anyone is wondering WHY this happens, at least for Internet Explorer it seems that the Flash player is loaded as an ActiveX control, which is completely seperate from the DOM and JavaScript modules. When the .swf is cached, it seems that the ActiveX control can load and run it before Javascript is ready to accept events from it.

This means that when Flash tries to use the ExternalInterface to add the callbacks, it will fail because the JavaScript and the DOM have not been loaded.

I fixed the problem by waiting for the first ENTER_FRAME event, and then registering my callbacks there. Like this:

protected function registerExternalCallbacks(event:Event):void {

    removeEventListener(Event.ENTER_FRAME, registerExternalCallbacks);

    if (ExternalInterface.available) {
        ExternalInterface.addCallback("flash_play", play);
        ExternalInterface.addCallback("flash_setVolume", setVolume);

        ExternalInterface.call("player_ready");
    }
}

// and then when the .swf loads, register the function on the event:
addEventListener(Event.ENTER_FRAME, registerExternalCallbacks);

This will make the player wait until the callbacks can be added reliably, and then calls a javascript function called player_ready to signal that it is ready to be used.

Answer 2

The issue is that the ExternalInterface class will stop working once the swf file is cached in your browser.

To overcome this obstacle, you have to modify your html file and your swf files in the following ways: Note: This solution was tested in IE7

The HTML file - Add parameters to your swf file to make it unique. So the browser will think you need to download a new swf file everytime the page loads.

For example, if you're using the SWFObject library (which you don't have to), then you would make the following adjustments:

var cachecontrol = Math.floor(Math.random()*99999);
var flashvars = {};
var params = {};
var attributes = {id:"movie"};
swfobject.embedSWF("movie.swf?nocache"+cachecontrol, "flashcontent", "100%", "100%", "10.1.0", "expressInstall.swf", flashvars, params, attributes);

As well, add the following meta tag to ensure your html file is not cached:

The SWF file(s) - If you're loading a swf file from a master swf, then you would have to apply the same logic: var cachecontrol:String = Math.floor(Math.random()*9999).toString(); loader.load(new URLRequest("movie.swf?nocache="+cachecontrol));

Here is the source of the solution: http://www.emanuelz.com.mx/blog/cache-control-tips-for-flash-120 Note: You don't have to do anymore than what is described above.