How do I detect if a user has got to a page using the back button?

detect if back button was used
javascript detect back button
javascript detect mobile back button
asp net detect browser back button
how to force reloading a page when using browser back button
onbeforeunload back button
intercept browser back button
reload page on back button laravel

This question is similar to Track when user hits back button on the browser, but not the same... I have a solution and am posting it here for reference and feedback. If anyone has any better options, I'm all ears!

The situation is that I have a page with an "in place edit", a la flickr. I.e. there is a "click here to add a description" DIV, which when clicked turns into a TEXTAREA with Save and Cancel buttons. Clicking Save posts the data to the server to update the database and puts the new description in the DIV in place of the TEXTAREA. If the page is refreshed, the new description is displayed from the database with a "click to edit" option. Fairly standard web 2.0 stuff these days.

The issue is that if:

  1. the page is loaded without the description
  2. a description is added by the user
  3. the page is navigated away from by clicking a link
  4. the user clicks the back button

Then what is displayed (from the browser's cache) is the version of the page without the dynamically modified DIV containing the new description.

This is a fairly big problem as the user assumes that their update has been lost and won't necessarily understand that they need to refresh the page to see the changes.

So, the question is: How can you flag a page as being modified after it has loaded, and then detect when the user "goes back to it" and force a refresh in that situation?

Use a hidden form. Form data is preserved (typically) in browsers when you reload or hit the back button to return to a page. The following goes in your page (probably near the bottom):

<form name="ignore_me">
    <input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" />
</form>

In your javascript, you will need the following:

var dirty_bit = document.getElementById('page_is_dirty');
if (dirty_bit.value == '1') window.location.reload();
function mark_page_dirty() {
    dirty_bit.value = '1';
}

The js that sniffs the form has to execute after the html is fully parsed, but you could put both the form and the js inline at the top of the page (js second) if user latency is a serious concern.

How do I detect if a user has got to a page using the back button , Use a hidden form. Form data is preserved (typically) in browsers when you reload or hit the back button to return to a page. The following goes� Excellent article. But my problem is how to avoid the back button from the current page. For e.g. after session expires, it will be redirected to “sessionexpiredpage.aspx”. If user is trying to click on back button it should not go back, it should stay in the same page and user will forcefully close the browser.

Here is a very easy modern solution to this old problem.

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

window.performance is currently supported by all major browsers.

Detect if page is load from back button, Is there any way to detect if current page came from back button? When a user goes back a page, any visible form data is preserved, while any JavaScript� Its not always a bad experience for the user, sometimes its the right experience. for example, a page may change its state with Ajax, e.g. gmail. when the user clicks 'back', the user actually expects the page to go back to the previous state, rather than to go back to the previous page – Yossi Shasho Feb 12 '12 at 15:58

This article explains it. See the code below: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

<html>
    <head>
        <script>

            function pageShown(evt){
                if (evt.persisted) {
                    alert("pageshow event handler called.  The page was just restored from the Page Cache (eg. From the Back button.");
                } else {
                    alert("pageshow event handler called for the initial load.  This is the same as the load event.");
                }
            }

            function pageHidden(evt){
                if (evt.persisted) {
                    alert("pagehide event handler called.  The page was suspended and placed into the Page Cache.");
                } else {
                    alert("pagehide event handler called for page destruction.  This is the same as the unload event.");
                }
            }

            window.addEventListener("pageshow", pageShown, false);
            window.addEventListener("pagehide", pageHidden, false);

        </script>
    </head>
    <body>
        <a href="http://www.webkit.org/">Click for WebKit</a>
    </body>
</html>

4 Design Patterns That Violate “Back” Button Expectations – 59% of , Indeed, the “Back” button has long been a staple of web navigation, and users' For example, if users click a link and 70% of the view changes to and going back to the product list from a product page testing shows that� Before clicking on the button: After clicking on the button: Example 2: This example sets a onClick event by using on() method to each button, When button is clicked, the ID of the button is passed to the function and then print the ID on the screen.

As mentioned above, I had found a solution and am posting it here for reference and feedback.

The first stage of the solution is to add the following to the page:

<!-- at the top of the content page -->
<IFRAME id="page_is_fresh" src="fresh.html" style="display:none;"></IFRAME>
<SCRIPT style="text/javascript">
  function reload_stale_page() { location.reload(); }
</SCRIPT>

The contents of fresh.html are not important, so the following should suffice:

<!-- fresh.html -->
<HTML><BODY></BODY></HTML>

When client side code updates the page, it needs to flag the modification as follows:

function trigger_reload_if_user_clicks_back_button()
{
  // "dis-arm" the reload stale page function so it doesn't fire  
  // until the page is reloaded from the browser's cache
  window.reload_stale_page = function(){};

  // change the IFRAME to point to a page that will reload the 
  // page when it loads
  document.getElementById("page_is_fresh").src = "stale.html";
}

stale.html does all the work: When it is loaded it will call the reload_stale_page function which will refresh the page if necessary. The first time it is loaded (i.e. after the modification is made, the reload_stale_page function won't do anything.)

<!-- stale.html -->
<HTML><BODY>
<SCRIPT type="text/javascript">window.parent.reload_stale_page();</SCRIPT>
</BODY></HTML>

From my (minimal) testing at this stage, this seems to work as desired. Have I overlooked anything?

How to tell if the browsers back button was pressed Solutions , I have a problem, where if a visitor comes from Page2 back to Page1 by using I detect if the user just pressed the back button and then how do I reload page 1? The reason I have to do this, is that Page 1 has some jQuery drag and drop going But if the user presses the back button on page 2, the browser shows page 1� But after clicking the back button of the browser, the previous page is not postback, the client side just opens from cache. It only works if the back page refreshes/reloads, because in that period the page becomes postback. The common problem has many solutions but each and every solution has some limitations.

You can solve it using the onbeforeunload event:

window.onbeforeunload = function () { }

Detecting if navigated to using the back button/replace history , I've got a situation where the user is stuck in a bit of a redirect loop it they navigate back to a page using the browser's back button. I am trying to find the best� Click is an event that fires immediately after you release the mouse button. So if you want to check in the handler for button2.Click if button1 was clicked before, all you could do is have a handler for button1.Click which sets a bool flag of your own making to true.

"Go Back" Button, <input type="button" value="Go Back From Whence You Came!" onclick="history. back(-1)" />. This is totally obtrusive, but you could fix that by only appending this button through If JavaScript isn't a possibility, you could use the HTTP_REFERER, sanitize it, and echo Many users aren't aware of their browser back button. Here's an alternative solution - since in most browsers the navigation controls (the nav bar, tabs, etc.) are located above the page content area, you can detect the mouse pointer leaving the page via the top and display a "before you leave" dialog.

Chrome plans to save you from sites that mess with your back button , If you've ever found the back button on your Chrome browser not These sites are the Roach Motels of the web: you can check in, but you can't Or going back to 1990 and putting all your money into Cisco shares There's a feature in the works that will stop pages from redirecting users or messing with� Session storage persists until the user closes the browser window, so you can't tell the difference between page reload and navigating away from and back to you site within the same browser session. – Hector May 19 '15 at 14:17

Understanding Success Criterion 3.2.2, 3.2.2 On Input: Changing the setting of any user interface component does not Individuals who are unable to detect changes of context are less likely to become when the user discovers that the back button no longer behaves as expected. radio for meeting, additional fields are displayed on the page for entering the� On Windows 10, File Explorer you have a small drop down icon on the right of the forward icon. If you click on it, you will get the dropdown with all the recent pages from which you can select which page you want to visit. This works exactly lick the right click on back button in Windows 7. Hope this information is helpful.

Comments
  • How is this different from the question you quoted?
  • the question is similar, but i think the environment and hence the answer is different, i could be wrong. my interpretation of what an issue may be that would be solved with the other solution is: user clicks a tab on a page that is loaded by ajax, then another tab and so on. clicking the back button would take you back to a different page, not the previous tab. they want to cycle back through the "ajax history" within the "page history". at least that's my impression of what the Yahoo Browser History Manager is supposed to do. i was after something a little more basic.
  • The accepted answer features your iframe trick.
  • "Form data is preserved (typically) in browsers" -- are you able to expand on that? is it not preserved in some browsers? or in some situations?
  • Actually, let me list all the ways I can think of this to go wrong. (1) Opera keeps the full state of the page and won't re-execute the js. (2) If your cache settings are tweaked to force the page to load from the server on back-button, the form data might get lost, which is fine for the purposes of this question. (3) Phone browsers have a much smaller cache and the browser may have already dropped the page from cache (not a problem for these purposes).
  • In some browsers hidden tags are not preserved. So you could use hidden text tag instead of using hidden input tag. <input type="text" value="0" id='txt' name='txt' style="display: none" />
  • This worked great for me. I'm sure it has situations when it breaks down, but every solution will for this problem.
  • It is not working on iPhone with Safari browser, try it, when you click back button, js is not called again.
  • I had not heard of this. I just found this documentation (developer.mozilla.org/en-US/docs/Web/API/Performance/navigation) and would be interested to hear you elaborate (e.g. why the need for window.performance && window.performance.navigation.type instead of just window.performance.navigation.TYPE_BACK_FORWARD?).
  • window.performance.navigation.TYPE_BACK_FORWARD is a constant that is always equal to 2. So it is just used for comparison.
  • Performance.navigation supported at all devices except andorid & opera mini but no problem its very nice (developer.mozilla.org/en-US/docs/Web/API/Performance/navigation)