Differentiate between back/ forward in jquery address plugin

Question

As can be seen in the documentation (http://www.asual.com/jquery/address/docs/), the plugin has an event to detect when the back/forward button of the browser was pressed.

$.address.externalChange(fn)

My question is if there is a way to know when the back is pressed and when the forward is pressed. For example, this will work in both cases:

$.address.externalChange(function() { console.log('back/forward pressed'); });

Thanks.

score 2 · Answer 1 · answered May 25 '13 at 11:37

To my knowledge, no history plugin can detect which browser button exactly has been pressed.

The best you can do is keep a history of visited pages, then check if the new page is further back in the history than the current one. When pages are revisited without the back/forward button, you'll probably get wrong results with below code.

Untested example code:

var visitedPages = [$.address.path()];
var currentPage = $.address.path();

$.address.internalChange(function() {
   visitedPages.push($.address.path());
});

$.address.externalChange(function() {
   var newPage = $.address.path();
   var currentPageIndex = -1;
   var newPageIndex = -1;

   for (var i = 0; i < visitedPages.length; i++) {
      if (visitedPages[i] == currentPage) currentPageIndex = i;
      if (visitedPages[i] == newPage) newPageIndex = i;
   } 

   if (newPageIndex == -1 || currentPageIndex == -1) {
      console.log("unkown button pressed");
   } else {
      if (newPageIndex > currentPageIndex) {
          console.log('forward pressed'); 
      } else
      if (newPageIndex < currentPageIndex) {
          console.log('back pressed'); 
      } else {
          console.log('page reloaded?');
      }
   }
});

I can't really get it to work. I'm trying to create a jsfiddle but I am neither capable. Thanks — Alvaro, May 27 '13 at 04:51
I gave you the bounty,but still cant get it to work. Could you post a fiddle,please? — Alvaro, May 28 '13 at 07:11
Maybe you could start a fiddle and we'll see whats the problem there? — Tyron, Jun 03 '13 at 09:16
I couldn't, but i will try again. Here is a more complex question about the same issue more elaborated where i just opened a bounty: http://stackoverflow.com/questions/16808014/jquery-address-certify-that-user-is-pressing-forward-button-and-not-back-button — Alvaro, Jun 03 '13 at 11:10

score 0 · Answer 2 · answered May 28 '13 at 13:51

I finally figured out. This code works for me in a normal page navigation, where I navigate between: Page1, Page2, Page3, etc. The code recognises back and forward in those cases.

var visitedPages = [$.address.path()];
var first_load = true;

$.address.internalChange(function() {

   visitedPages.push($.address.path());

});

$.address.externalChange(function() {

    var newPage = $.address.path();

    if (visitedPages[visitedPages.length-2] == newPage) {

        console.log('back');
        visitedPages.splice(visitedPages.length-1 , 1);

    } else if (first_load === false) {

        console.log('forward');     
        visitedPages.push($.address.path());

    }

    first_load = false;

});

Differentiate between back/ forward in jquery address plugin

2 Answers2