Flash object inside ASP.NET form error in IE 7

Several months ago I posted a blog about how to access a flash object by javascript. I found a very interesting error when I put a flash object inside a form in asp.net and called this flash by javascript. The error from IE would be "object not found or not defined" and it just didn't allow me to control the flash by javascript.
I found that this error only occurs in IE 7 with flash player version 9. The same page works perfectly fine in other browsers including firefox and chrome. I also found that this error would not occur if we test it in flash player version 10 with IE 7 and IE 6.
After spending almost a whole day to debug this error, I found that if I put the flash object outside of the <form> </form> tag in asp.net, the error is gone. Here is my flash embed tag:


  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
 id="usmap" width=580 height=410> 
              <param name=movie value="flash.swf"> 
              <param name=quality value=high> 
              <param name=play value=false> 
              <param name=bgcolor value=#FFFFFF> 
              <embed play=false swliveconnect="true" name="usmap" src="flash.swf" quality=high bgcolor=#FFFFFF  
 width=580 height=410 type="application/x-shockwave-flash"  
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed > 
</object > 


My javascript for calling the flash object:
<script type="text/javascript">

function getFlashMovieObject(movieName) {
          if (window.document[movieName]) {
              return window.document[movieName];
          }
          if (navigator.appName.indexOf("Microsoft Internet") == -1) {
              if (document.embeds && document.embeds[movieName])
                  return document.embeds[movieName];
          }
          else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
          {
              return document.getElementById(movieName);              
          }
      }



 function somefunction() {
          var flashObj = getFlashMovieObject("usmap");
          if (flashObj) {
              flashObj.someFunctionFromFlash();
          }
      }

</script>


As I said, the only solution I found is to put this flash embed object outside of the asp.net form tag. However, this is an ugly solution and not very realistic as ASP.NET page put all the controls inside form tag. After some hard work of googling, I finally found the reason:

The problem really comes down to the fact that every ASP.NET page is wrapped in a <form> tag and there is a bug in Internet Explorer that hides the containing flash object (the player) in the DOM. To solve this problem, you can simple elevate the player object to a window level element, as shown in Figure 3 below.

window.player = document.getElementById(‘player’);

Ref: http://blogs.popart.com/2007/11/flash-externalinterface-in-asp-net-applications/

This is a really great and simple solution. All I need to do is to add this line into my javascript:
window.usmap = document.getElementById('usmap');
or
window.usmap = window.document['usmap'];


Hope you find this one useful too.


Happy programming!