PDA

View Full Version : My browser back button solution...


FREAKNUT
01-12-2007, 04:33 PM
Alright, I've worked up my solution to the browser's back button. It covers linking and bookmarking as well. It works perfect in Firefox 1 (haven't tested 2 yet). It also sort of works in Opera, except everytime you click the back/forward button, it refreshes the whole movie. My biggest problem is that it doesn't work in IE, and I am now stuck. I need some help figuring out the issue, and it's difficult to explain it, so here's the link to it...

*Edit*(I just removed this link on 1/22/07 and will post it again at a later date)*Edit*

Please excuse my code...it's messy and I need to clean it up. Here's the copy of my ActionScript that I use to detect the URL change. It's also messy and needs cleaning up, but it works. The frame that it redirects to is the frame right before it, so it's a constant loop. import flash.external.ExternalInterface;
var myUrl:String = String(ExternalInterface.call("getHash", null));

if ( myUrl == "#home" and _root.link != 1 and _root.flag == 1 ) {
_root["item"+_root.link].gotoAndPlay("s2");
_root.item1.gotoAndPlay("s1");
_root.link = 1;
_root.linkhead = 1;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleHome");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#customsoftware" and _root.link != 2 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item2.gotoAndPlay("s1");
_root.link = 2;
_root.linkhead = 2;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleCustom");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#companyprofile" and _root.link != 3 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item3.gotoAndPlay("s1");
_root.link = 3;
_root.linkhead = 3;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleProfile");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#backup" and _root.link != 4 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item4.gotoAndPlay("s1");
_root.link = 4;
_root.linkhead = 4;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleBackup");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#serverhosting" and _root.link != 5 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item5.gotoAndPlay("s1");
_root.link = 5;
_root.linkhead = 5;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleServer");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#hardware" and _root.link != 6 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item6.gotoAndPlay("s1");
_root.link = 6;
_root.linkhead = 6;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleHardware");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#webdesign" and _root.link != 7 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item7.gotoAndPlay("s1");
_root.link = 7;
_root.linkhead = 7;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleDesign");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if ( myUrl == "#webhosting" and _root.link != 8 and _root.flag == 1 ){
_root["item"+_root.link].gotoAndPlay("s2");
_root.item8.gotoAndPlay("s1");
_root.link = 8;
_root.linkhead = 8;
_root.flag = 0;
_root.pgap.play();
ExternalInterface.call("titleHosting");
getURL("javascript:window.scroll(0,0);");
gotoAndPlay("pagedetect");
} else if (myUrl == "null") {
gotoAndPlay("nohash");
} else {
gotoAndPlay("pagedetect");
}
If anyone can give me some advice as to the issue I'm having in IE, I would GREATLY appreciate it! I've been working on this for a while, and I've hit another dead spot. Just FYI...there are a few links I haven't coded in yet. All I've got working is the left navigation. Thanks a whole bunch!

*Edit* Hey, I forgot to add the scripting on my buttons. import flash.external.ExternalInterface;
ExternalInterface.call("postHash", "home");
ExternalInterface.call("postTitle", "Creative Software Solutions - Home");

FREAKNUT
01-12-2007, 08:42 PM
Alright. I fixed a few of the issues, and cleaned up a bit of code. One was that I had a getURL executing a JavaScript function, and IE doesn't like Flash movies executing JavaScript from within. Second was that I needed to add named anchors to the page so that the links have somewhere to point to (not needed in Firefox). Now I've run into another problem. When I click the back and forward button, for some reason my JavaScript function (alert (document.location.hash)) returns the hash from the last link clicked, not from the address bar. I've posted the updated version of my site.

Browse through a few links on the left navigation and take note of the hash on the URL. If you click the back button at all, then click the "alert" text at the top, it will show you that the hash is the one that was last POSTED by the flash movie, instead of the current one.

Take note that this issue is only in IE (so far as I know, IE7, as I don't have any other versions to test).

FREAKNUT
01-12-2007, 09:09 PM
I found a bug report that mentions the issue I'm having...this comes from http://www.quirksmode.org/bugreports/archives/explorer_windows/, the section titled "Back and forward between named anchors doesn't update window.location" When navigating between named anchors in IE, the window.location object changes to reflect the change in the URL. This is correct. However, the window.location object should also change when you use the back or forward buttons, or the history.back() and history.forward() methods, to move between these anchors, and in IE 6.0 and IE 6.1, it does not.Anyone have any suggestions to work around this bug?

FREAKNUT
01-15-2007, 08:30 PM
I've decided to go with iframes to execute my Javascript and update the URL hash properly. I'll update you guys when I've got it working or have new questions.

FREAKNUT
01-15-2007, 09:46 PM
This is in Firefox!!!

I have the iframes set to change the URL hash onLoad with JavaScript, but everytime it does that, it places the page that it left into the history twice. For example...I've got links 1,2, and 3. The title and hash that each link sets when clicked is also 1, 2, and 3. Say I'm at 2 and I click on the link for 3. If I have the command onLoad = "return (parent.document.location.hash = '#3')" in the <body> tag for page 3, then when it loads into the iframe, page 2 now shows twice under the drop-down for the back button. If I remove that onLoad line from the <body> tag, then page 2 will only show up once in the back button drop-down.

Anyone happen to know why it does this? I'd be much appreciative if someone could let me in on the reason why.

FREAKNUT
01-19-2007, 04:48 PM
I needed to change the onLoad command in the Iframe fromonLoad = "return (parent.document.location.hash = '#3')" to onLoad = "return (parent.document.location.replace = 'mypage.html#3')" It works!

Now I have the back/forward buttons, deep-linking, and bookmarking working in both Internet Explorer and Firefox. It sort of works in Opera, but it restarts the movie every time the back/forward buttons are clicked. I'm not too worried about that though. Maybe when I get some free time I'll fix it...maybe not. There's also a minor bug in IE where, if you click refresh, it'll change the title of the page to the hash. Oh well! No one has a need to refresh the page, and I doubt anyone would notice anyway if they did.