0

I am assignign a back button in my mobile app with this javascript code:

//Add back button code onclick
            $("#backLocation").replaceWith("<a href=\"#\"  ><img id=\"backClick\" style=\"vertical-align: middle;\" src=\"img/back.png\" height=\"30\" width=\"30\"> </a>");

            $(document).on('click', "#backClick", function (e) {
                //go back a page
                e = e || window.event;
                e.preventDefault();
                window.history.back();
            });

The code works great if you are one page deep. But if you go two pages deep and use this onClick to go back to the original page you run into some problems.

For Example:

Page1 -> Page2: If you use the above javascript on page to you will go back to page one. Works exactly how it should.

Page1 -> Page2 -> Page3: This is where things get odd. If you are on page three and click my button to execute the above javascript it brings you back to Page2 perfectly. On page2 if you try and go back to Page1 the code does not work on first click, but on second click it will bring you back to page1.

Update:

I found out where my the odd behavior is coming from. To get to Page2->Page3 you need to click a link for a pop up before going to Page3. The pop up button initiates the pop up with an href="#" therefore its adding the .html# before going to page3.

When we get back to Page2 we are really at Page2#, clicking back takes us to the Page2 and that why we need to click twice to get back to Page1.

Any ideas on how to fix this? I tried making the href="" without the pound but that just made the pop up not work.

Mike
  • 6,751
  • 23
  • 75
  • 132
  • From this question http://stackoverflow.com/questions/9756159/using-javascript-how-to-create-a-go-back-link-that-takes-the-user-to-a-link-i The answer says EDIT: "Don't use `...`, as this will add another entry to the session history. It's better to use a `` or some other element. Note that typeof document.referrer is always "string" and not empty if your page is inside of a (i)frame." This may be your problem – Alexei Darmin Aug 18 '15 at 23:03
  • You got me thinking outside the box and as a result I know why the issue is happening. Still not sure how to fix. Check out the update. – Mike Aug 18 '15 at 23:15

2 Answers2

1

window.history.back() doesn't accept parameters, if you want to go back more than one page you need window.history.go(-2). There's a detailed explanation in the MDN site, here it is: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

nril
  • 558
  • 2
  • 7
  • but its working for one page, and working for two pages just now on first click. – Mike Aug 18 '15 at 23:00
  • the answer now is valid `window.history.go(-2)` simply go back 2 places since you know you need to go back more than once :) – Alexei Darmin Aug 18 '15 at 23:16
0

Based on the update the simple way to fix this is for the pop up use a and add an onClick.

By doing this I wont have the # added to the history.

Mike
  • 6,751
  • 23
  • 75
  • 132