JavaScript

When building certain Flash applications, it is beneficial to update the URL in the address bar to indicate the area of the application that the user is currently viewing. That way, if the user bookmarks the URL and/or sends the URL in an email, the return visit will result in the Flash application displaying the appropriate information.

The technique employed to accomplish this functionality involves the portion of the URL after the "#" character, which is called the "hash" portion of the URL. Hash values are often used on web pages that do not involve Flash. For instance, some web pages which present a list of FAQ items use standard HTML anchor links that update the hash value (i.e. <a href="#faq16">), resulting in the user being shown the item of interest without having to wait for the entire web page to reload.

Therein lies the beauty of using hash values to keep track of where the user is navigating in a Flash application: Updating the hash portion of the URL does not trigger a page reload. Therefore, it is a good idea to leverage this opportunity to update hash values and provide a better user experience on return visits to the application.

When a user returns to the web page with a hash value stored in the URL, a JavaScript function is used to parse the values out of the hash and then pass those values into the Flash application upon load using FlashVars. Depending upon the values passed to it, the Flash application can then behave accordingly.

A great example of a Flash application that updates (and reads) hash values is Yahoo! Maps. Notice what happens after each time you use your mouse to drag the map around: The URL hash values are updated with the latest latitude and longitude so that if you were to send this URL to a friend, your friend would see just what you see. For example, I copied the URL for Cambridge, MA and am showing it to you here. (Update: Yahoo! Maps no longer uses Flash)

The hash portion of a URL can be updated dynamically by using JavaScript to set "window.location.hash" to a particular value. Without worrying about Flash for a moment, it is fairly straightforward to create a simple JavaScript function to update the page hash on a web page (as is shown in the example below).

Normally, calling a JavaScript function from Flash acts the same way as it would if you were to call the JavaScript function from a button on the web page itself, for instance. However, there is a bug in Internet Explorer 6 which causes it to mishandle the setting of the page hash when the JavaScript function is being called from Flash. Firefox and Safari process this function from Flash just fine; go figure.

In order to get this function to work in IE6, you have to embed the Flash application into an IFrame. Then, the Flash application calls a JavaScript function which sets the value of "parent.location.hash" instead of "window.location.hash". Thankfully, this technique also works in Firefox and Safari, so getting this functionality to work in all browsers can be accomplished using a single approach.

The example below illustrates the technique of setting the hash value from Flash. The Flash application is embedded into the page using an IFrame. The button on the Flash application (using the ActionScript code shown) calls the "sethash" JavaScript function, which sets the parent's hash value to the current time (the number of milliseconds since midnight on January 1, 1970). Notice how the number in the page URL changes after each button click.

A detailed comparison example is also available at this link to illustrate how Internet Explorer 6 handles Flash calling this function in different circumstances. In Exhibit A, Flash is embedded directly in the page, and clicking the button fails to set the page hash after the first button click in IE. Exhibit B illustrates the technique described in this posting, and the hash is set successfully regardless of browser type.