复选框/后退按钮问题取决于浏览器

Question

I've implemented a website in .jsp / JSTL / EL that works fine. However, depending on the browser (!), the behavior of the back button is varying a bit.

I did take care to not have double post (so that the browser does not warn the user that he's going to post again) but then apparently this leads to another issue: if I use the back button from Chrome, then the value of the checkboxes aren't correct.

Here's the scenario as I understand it:

1. user is on page /page1 then checks a checkbox
2. a POST is made, there's a HTTP redirect
3. a GET is made, page /page2 displays fine, with the checkbox checked as it should be
4. user hits the back button
5. user goes back to /page1 as it was before the checkbox was checked (which is exactly the expected behavior for the back button) but the checkbox is still checked.

From looking at the server's log and my application's log as far as I can see there's absolutely nothing transmitted to the webserver. So it's purely on the client side that things are happening.

What is going on and how can I fix this? (without using a framework, it's not what this question is about)

EDIT I should probably give a bit more info... The webapp is already a bit "fancy" in that each page served --in a tiny URL-like fashion-- corresponds to a state. Everything is "public": anyone can see anyone's pages (but it could be private, with private URLs). Anyway: if a user shares any of its page, when another user shall open a page it shall display correctly and the checkboxes are correctly initialized.

All this to say that the problem is not on the server side, where the "state" somehow wouldn't be correct: if user A share pages .../1d2eof then user B opening the page .../1d2eof shall see the correct page.

The only times where this gets messed up is when the user uses the back button. Remember that, at any point, I've got the full page's state accessible on the server side. However my issue is that apparently when using the back button nothing contacts my server, so I don't get the chance to "fix the page" for the user who used the back button.

Maybe a double redirect would help!?

Answer 1

This is how i solved mine using a combo of hiddenfield and the querystring.

<script type="text/javascript">
    jQuery(document).ready(function () {

    if (!(window.location.toString().indexOf('&FIP') >= 0) && (document.getElementById("<%= hdnField.ClientID %>").value.toString() == "BackButtonClickIsSet")) {
        document.location.reload(true);
    }

    if (!(window.location.toString().indexOf('&FIP') >= 0)) {
        document.getElementById("<%= hdnField.ClientID %>").value = "BackButtonClickIsSet";
    }

    if (window.location.toString().indexOf('&FIP') >= 0) {
        document.getElementById("<%= hdnField.ClientID %>").value = "BackButtonClickIsNotSet";
    }

});
</script>


<asp:HiddenField ID="hdnField" runat="server" Value="BackButtonHiddenField" />

Answer 2

This is a browser feature: pressing the "back" button will restore the final state of the form. If you want to reset the form contents to what was specified in the HTML (ie, to a state before user interaction), you can use document.formName.reset() , where formName is the name of the form. (Unfortunately, it's a bit hard to detect that the user has hit the "back" button and returned to the current page, so it's tricky to figure out when to run the above bit of code.)

Answer 3

You might want to take a look at http://www.bajb.net/2010/02/browser-back-button-detection/

It offers the ability to get control over what happens on the client side (and possibly server side with ajax) when the back button is clicked.