无论如何，是否有检测上一次导航事件是由后退或前进浏览器按钮引起的？

Question

I'm writing a single-page web application that uses HTML5 push state (Falling back to hash tags) to handle client side navigation.

One of the things I've noticed is that if a user scrolls down the page and then clicks a link to another page, when they navigate to that page the browser will still remain in the scrolled position.

I wanted to that if you went to a new page it would smooth scroll you to the top (Same behavior as all websites when following links).

I achieved this with a little jquery animation in my navigation controller, the problem I now have is that if you click the browser back button you wont end up in the scrolled position that you were on previously, instead you will be on the previous page but you'll be scrolled to the top.

Is it possible to detect if the last/current client side navigation was caused by the back or forward buttons of the browser? If so I will use this to prevent the scrolling.

Cheers

Answer 1

As far as I know, you can only catch the difference between "my application changed the hashtag" versus "the browser forced the hashtag change".

This is how I check it:

When your controller pushes a new state(opens a page) with its new hashtag, store this new hashtag in a global javascript variable right before you set it to window.location.hash. When you catch the 'hashchange' event, you then compare this global variable of yours with window.location.hash. If the global variable is the same as the new hash tag, it means your application just changed the hash itself(and opened to a new page). If the global variable is not set, it means the browser forced the navigation. However, you cannot know whether the browser forced the navigation because of an address bar edit or because of the back/forward button.

Consider this code:

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

In your controller, right before you update the hash tag, call this code:

gCurrentHash = window.location.hash;

It is very important that this is called BEFORE you actually change the window.location.hashtag!

[edit] You could try this alternative: Store the history of the hashtag changes in a cookie and compare the changes. From that info you can estimate the back/forward navigation events.

Answer 2

i want a site i'm working on currently to respond identically no matter if the user types in the special ajax recognized hash tag, bookmarks it or clicks on the corresponding page link. therefore, i look at the pattern of the hashtag itself and force navigation when needed.

for example:

var myDefaultPageName = "myAjaxPage1";

// hash tags in this domain may indicate ajax page navigation
// using '#!' to indicate ajax links however, allowing user to type in 
// hashtag without '!' so function understands both '#!myAjaxPage1' and
// '#myAjaxPage1' as ajax requests, the pattern of the hashtag will be
// checked to determine if ajax navigation is needed

function processHashtagChange() {
    // note: bookmarked urls may be #! or #, need to understand both
    var startIndex = 1; // skip '#'
    if (location.hash.charAt(1) == '!') { // check for special '#!' ajax prefix
        startIndex++;
    }

    // extract ajax pagename from hash
    var pagename = location.hash.substring(startIndex); 

    var regex = "."; // match everything for now, hash tags 
                     // only used for ajax navigation here

    if (pagename.length == 0) // default to something if needed, allows 
    {                         // back button to http://mydomain.com to load 
                              // default ajax page
        pagename = myDefaultPageName;
    }

    if (pagename.match(regex)) { // does this hash indicate ajax navigation
        var pageurl = '/?page=' + pagename;    
        loadPageViaAjax(pageurl); // update the dom via ajax
    }
}