Question

My application has pages with several tabs that simply switch the visible content. However, the page also has links that will add tabs to the page. In addition, the application remembers (with cookies) which tab you last viewed in case the page is refreshed (strict cache settings cause refreshes even when using the back and forward buttons).

My problem is that the first time you visit this set of pages, it should show the first tab (Tab A). Then, you click a link, and it adds a tab, and it remembers that new tab (Tab B). However, if you hit back, now it looks like it did nothing because it remembers and displays the tab you last clicked (Tab B).

Remembering Tab B is desirable behavior if you click forward to a new page and then use our in-application history to return to the previous page. However, it is undesirable if you click the Back Button, because you want it to again show Tab A, the way it did when you first arrived.

My question is whether the JavaScript onunload event can detect the difference between leaving the page with the Back Button, or some other means. At this point, I want it to forget any tabs that it had remembered for that page.

Answer 1

If the difference you are trying to detect is between a user clicking a link and navigating away from the page some other way, you can detect a link click using JavaScript by attaching onclick event handlers to each link you want to observe clicks on.

So if onunload fires without an onclick first having fired, the user is leaving the page some other way than by clicking one of your tracked links.

<script type="text/javascript">
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = setGlobal;
}
function setGlobal() {
    window.linkClicked = true;
}
window.onunload = function() {
    if (typeof window.linkClicked === 'undefined' || !window.linkClicked) {
        // they are leaving some other way than by clicking a link
    }
}
</script>

It gets a bit trickier if you already have onclick events on your <a> tags, if that’s the case I can provide a way to do that too.

Of course you can also attach to all the onclick events using jQuery or another JavaScript library.