Question

I’ve just finished writing a pretty substantial amount of Javascript (I’ll spare you everything but the most relevant parts) and I’m left with just one problem.

At one point I need to use location.href to advance to an article page. If the user clicks their browser’s back button from the article page, they return to the home page (good) but the page is in the state it was when they left initially (bad).

The Javascript simply doesn’t realize that the page has changed, and, perhaps more surprisingly, neither does the HTML (there are several places where I’ve used Javascript to modify the standing HTML).

A small amount of disclosure: This is a mobile site. I’m listening for a short press of an element (as opposed to long for dragging) using touch events. Any sort of non-Javascript linking I’ve tried has messified up the dragging bit as none of it cares too much how long a finger has been down for, and usually freaks out if you try to move the finger while dragging.

I can’t think of any other code that would be horribly useful here, but I’d be glad to post whatever it takes.

Thanks!

-S

---

By request, below is some relevant code:

function t_end(e)
{
    var touch = e.changedTouches[0]; // Get the information for finger #1

    // we only really care if we've been dragging already,
    // and the finger that's been lifted is the same (first)
    // finger from the initial touch.
    if(dragging && !change_ready && touch.identifier == touchID)

    {
        var spd = (100.0 * touch.pageX / $(document).width() - last_touch[0].x)/(new Date() - drag_time);

        // if the finger has been down for a very short time,
        // and is not moving quickly when removed, this will
        // count as a click, and not a drag.
        if(new Date() - start_time < 50 && spd < .2 && spd > -.2)
        {
            debugText("leaving for page @ " + roll_data[current_story].link);
            location.href = roll_data[current_story].link;
        }else{

            var dir, new_story;

            // at higher speeds we will swap stories.
            // at lower speeds will will just return.
            if(spd > .2 || spd < -.2)
            {
                if(spd < 0)
                {
                    new_story = (current_story > 0 ? current_story - 1 : story_count - 1);
                    dir = "r2l";
                }else{
                    new_story = (current_story < story_count - 1 ? current_story + 1 : 0);
                    dir = "l2r";
                }
            }else{
                new_story = current_story;

                // nx: new x.  The point to which the
                // finger has dragged the current story
                var nx = 100.0 * touch.pageX / $(document).width() - anchor_point.x;
                if(nx < 0)
                {
                    current_story = (current_story > 0 ? current_story - 1 : story_count - 1);
                    dir = "l2r";
                }else{
                    current_story = (current_story < story_count - 1 ? current_story + 1 : 0);
                    dir = "r2l";
                }
            }

            change_ready = true;
            dragging = false;

            toStory(new_story, dir, "no", 100);
        }
    }
}

• This code comes from a story roller, to be used on a mobile site. Stories change out through a list, by scrolling on from the side of the screen and scrolling off the other.
• This function is what the touch-end listener points to. Whenever a finger (any finger) is removed from the screen, it is triggered. A good simple breakdown of touch events can be found here.
• roll_data is an Array of objects with several properties including link (a url).
• toStory() is a function which slides to a selected story given a story to slide to, a direction (left to right or right to left, given by "l2r" and "r2l") whether or not to reset the position of the current story (given by "yes" or "no") and a time over which to animate the change. With the exception of the first parameter, all are optional.
• debugText() is a simple function which sets the .innerHTML (or rather, .html() via jQuery) if a boolean (debugging) is true.

When the page is backed-to, the most immediate signs of a problem are that the debug text is still present (and set to the last thing it was set to, in this case “leaving for page @ [url]”). The Javascript has also come to a screaming halt (several variables need to be told that they’re not done with the page just because someone has clicked out of it).

Answer 1

It is possible to detect when a page is left and to set then things to the wanted state.

<!DOCTYPE html>
<html>
<head>
    <title>unload demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function resetPage() {
            // alert("unload");
            // reset page here
        }
    </script>
</head>
<body onunload="resetPage();">
    hello world
</body>
</html>