October 02, 2005
That Old Devil Called Back Button Again

Jens Franke's excellent session on the Flashforum Tour about Flash usability issues inspired me to give the old "Flash breaks the back button, there is no deep-linking possible and there is no way to bookmark pages" problem another go. To make it short: I wasted a day only to find out in the end that Kevin Newman already seems to have developed a solution that works. But let's start from the beginning.

As you probably know several people have already tackled parts of the problem with success:

- Robert Penner was the first to invent a working back button solution for Internet Explorer

- Chris Hendershot improved Robert's method so it works also with other browsers and especially on Macs

- Mike Chambers demonstrated a method that also bases on Robert's method which uses LocalConnection and does not rely on JavaScript

All these methods work with a hidden frame, and do not change the visible URL when navigating. The consequence is that while they enable the back button they do not address the bookmarking problem.

There's an article by Kevin Lynch which demonstrates how to track states within Flash applications by updating the visible URL and title tag of the html page and thus allowing to bookmark sub-pages of Flash sites. Unfortunately this method does not allow to use the back button.

In theory the whole affair could be so easy to solve with the help of named anchors. Named anchors are like markers within a HTML page which allow to jump to certain positions on a page without reloading it, in HTML they look like this: <A name="example">. They are perfectly suited for our purpose because a) they get shown in the URL (http://www.blahblah.com/page.html#example) and b) they register in the browsing history which means you can navigate back and forth and bookmark them.

Macromedia even introduced them in Flash MX. The problem with the way they are implemented is that they are static and do not behave correctly. Static means that you will have to compile them into the swf and cannot generate them dynamically with ActionScript - this makes them pretty useless for sites or applications that get their content or structure from external files, but if you can live with that there is a good tutorial on noscope how to use them.

Unfortunately the internal Flash anchors have an annoying side-effect: when you have for example 4 anchors/pages "one", "two", "three" and "four" and navigate directly from "one" to "four", the browser history will register "one-two-three-four" instead of "one-four", so clicking the back button will take you to "three" in this case.

So this is where I started from and failed in the end. The goal was to find a method which allows to enable the back button and bookmarking and all this without using hidden frames or static precompiled anchors. It should also work with Flash 6, so I could not use ExternalInterface. The basic idea is very simple: just generate the named anchors inside the HTML page with javascript whenever they are needed and update the browser's location. Surprisingly this method worked perfectly. Except in Internet Explorer which it crashed. I could nail this crash down to the getURL("javascript:...") method I was using and after replacing the call by an fscommand I was able to make that part work even in Explorer.

What I had to discover was that this was only half of the rent. The other problem was to notify Flash when the user had pressed the back or forward button. And again it turned out that Internet Explorer is a piece of sh*t. It could be so easy - just watch the location.hash in JavaScript (that's the part after the "#" in a url) and tell Flash when it changes. But IE has this unique bug (MS probably calls it a "security enhancement") that even though the URL visibly changes when you navigate back and forth the location.hash property in JavaScript does not.

This is where I started searching Google and I should have done so earlier, because it looks like other people ended up in the same cul-de-sac. But of course you first have to know the problem before you know how to search for it. And whilst searching for a solution for the IE show-stopper I finally stumbled across this:

It looks like Kevin Newman has indeed found a way to make the back & forward buttons work and bookmarking possible in Flash: his FlashSuite is still under development, but at least in all my Windows browsers it really seems to behave as intended. It uses his HistoryKeeper class which might also be interesting for AJAX programmers as they face some of same problems as Flash developers.

The question is now - how compatible is this method? I think Kevin (and everyone who thinks about using it) might be interested in getting some feedback how and if it works in various browser/OS combinations. So if it doesn't work for you - please leave a comment or send him an email which combination you were using.

I hope he will clean up the code a bit - at the moment it looks a bit frightening with all those .js includes. A single JavaScript file to include would be very comfortable. And maybe the option to use the meanwhile well established FlashObject for the swf inclusion part.

[UPDATE] As you can read in the comments Leo Bergman has also developed a system that works in most of the browsers (except for the usual ill-behaving culprits Opera, Netscape and Safari). See the demo here. Download the source files here.

Posted at October 02, 2005 03:27 PM | Further reading
Comments

This is the Holy Grail for Flash developers, however it appears Mr. Newman's method does not work properly in Safari 2 on OS X 10.4.2. The example page just continues to reload the page in an infinite loop.

Posted by: Sean on October 3, 2005 01:04 AM

Oh that's bad news. I hope he is able to fix that. Thanks for the feedback.

Posted by: Mario Klingemann on October 3, 2005 01:12 AM

This seems to be a general problem with Safari and named_anchor links. Others had that problem before, too: http://www.noscope.com/journal/2005/05/welcome-safari

Posted by: Mario Klingemann on October 3, 2005 01:17 AM

I have also developed a solution with bookmarking, deeplinking and back button without the need for extra HTML files.
It's far from perfect though and backbutton does not work on Opera, Netscape and Safari, but at least fails gracefully.
So it should still be worth implementing since it covers the vast majority of users and does not cause problems for the rest.

I wil take some time eventually and rewrite it to use localConnection instead of JS to try to resolve those issues.

You can have a look at it on http://www.blixtsystems.com/index.html#ss=pid&pid=14&page=download

Posted by: Leo on October 3, 2005 10:04 AM

We developed a deeplinking and back-button solution which was implemented in the Sony PSP site.

If this works as well as we think it does, I may release a slight rewrite of the classes used.

My main issue with flash is content indexing for search engines, but that's a whole 'nother potato.

Posted by: Jason on October 3, 2005 11:54 AM

@Leo: thanks for letting us know about your solution - please keep me updated when you are able to make the local connection thing work.

@Jason: I'm looking forward to the release of your classes. Though it looks like on the PSP site the back/forward button does not yet work on IE/Windows - as a wild guess I'd say that in order to make it work in IE you will have to create those named anchors inside the html page with JavaScript. or VBscript. At least that's what I had to do.

Posted by: Mario Klingemann on October 3, 2005 12:18 PM

I will keep you updated about any progress.
Of course anyone inspired by the code is free to make modifications.
I'm confident the issues can be resolved with a bit of effort, and I think it would be doing the Flash world a great favour if there would be a solid and easy to use system available.

My system as it is now is fairly quirky to implement if you have more than just a sequence of pages.
It can be used for a multi level navigation system with a bit of effort, but I really would like to make it easier to implement in those cases.

It's also a bit quirky in the way I had to handle the differences between the two browsers i focused on getting it to work with, IE and FF.
For IE it was fairly easy to get to work using VBscript to write contents to an iFrame and updating the hash.
FF was more problematic and I resorted to a less than desireable solution where the swf needs to poll a javascript with regular intervals checking for an updated hash, and if it finds an update return the parameters to flash.

Opera fails since I don't manage to send the variables back using "document[movieid].SetVariable()".
I seen examples where that works with Opera though and I guess it's should be not too hard to fix.
On mac I have not tested myself and don't even know what browsers there does support the SetVariable, but I presume that for some browsers there is no other solution that using localConnection.
Something that would be quite easy to do is to replace the code for communicating between Flash and JS by using the JS integration kit instead which hopefully should resolve the problems with most browsers.

Posted by: Leo on October 3, 2005 02:07 PM

I'm surprised that you say that FF was problematic. It seemed to me that especially in FF you could simply use getURL("#whatever") to call an anchor, which did not work in IE. Did you try that?

And yes, the JS integration kit should probably solve most of the communtication problems. Maybe it could even reduce the amount of special browser workarounds currently needed.

In the end the perfect solution would only consist of two files: one .js to include in the html page and one .as file to include in the flash file.

Posted by: Mario Klingemann on October 3, 2005 02:54 PM

Hi guys! I didn't think anyone knew my script existed :-). This will definately provide some motivation to get this working better - well that and I have a client who is actually paying me for it :-D .

I have some ideas that I think will work on just about every browser (I think I finally found that common code path), and I will try to make deployment as simple as possible, while providing some advanced features (like the ability to load a url with each history entry, which would enable path click tracking stats, and the like).

Hopefully I'll have something up and running soon - even if Safari doesn't get the bookmark string support :-(

Posted by: Kevin Newman on October 3, 2005 07:21 PM

heya... i put together a little deep linking, back button enabled flash app and i'm looking for people to test it out .... its based on a combination of kevin and mike's techniques...

more info here...

http://flashmx2004.com/forums/index.php?showtopic=7363

cheers

jdean

Posted by: jdean on October 4, 2005 07:34 PM

I had a go with the JS integration kit to see if that would to resolve any of the issues.
That did not solve the problem with Opera 8.01, apart from getting rid of the JS errors.
Opera 8.5 works fine, but also with the old version.
What remains to see is if it works now on Safari, NS and IE on Mac, but somehow I doubt it.

You can get the new version here:
http://blixt.gotdns.com/blixt/getDownload.php?id=3

I'm also very curious to find out more about the approach that made it simple to get to work with FF.
When you say it's simply to use "getURL('#whatever');" what method have you used to sense when the backbutton is used?

I'm still using the polling method for non-PC IE browsers since I just cannot seem to get the bookmarking and updating of the hash to both work. Only backbutton or only bookmarking works fine on their own, but as soon as I try to do both one of them stops working.

I probably will not put too much effort in to making the script work on every perceivable browser.....the reason I started with Flash in the first place was that I found cross-browser compatability issues tedious to contend with :)
I also realized when working with the script a bit more that the main problem with making a solution that works on every system is not the actual communication between the browser and Flash, but rather the differences in how browsers handle updates of the hash or replacing contents in an iFrame.
It would be neat to get Safari to work as well though, thats the big one missing.
I hope Kevin beats me to it though, because I must say I'm much more comfortable in my predictable AS world :)

Posted by: Leo on October 7, 2005 09:48 PM

The only systems that work with Safari are based on Robert Penners solution. I checked all the systems that you've mentioned after the first three and none of them works correctly on Safari 2, Mac. Klingemanns system shows a continuous flashing page (so that's even worse than no backbutton at all), Blixtsystem doesn't do anything at all. Jdeans system does work but I can't see any improvements compared to the first one of Robert Penner (bookmarking does not work on Safari)

Posted by: sander kessels on October 8, 2005 01:52 AM

Deep (Stateful) Linking and Back Button Integration with Flash Applications

i fixed some bugs, built a simple demo, wrote an explanation and provided some source files. enjoy!

http://www.chakramedia.com/deeplink-backbutton/index.html

Posted by: jdean on October 13, 2005 07:42 AM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers