change url with jquery like facebook messages

Question

May be you think this is Duplicated, But This is not duplicated.

change-hash-without-reload-in-jquery in this topic you change url after a # character but if you take a look at facebook message url change, you can see that facebook change url without any extra # character.

facebook.com/message/user1

and if you click on second user message it will be change like:

facebook.com/message/user2

This url change without redirecting and using a # character.

It's called the [HTML5 history API](http://diveintohtml5.info/history.html), and this is a duplicate of a bunch of similar questions. — adeneo, Nov 06 '12 at 19:24

score 2 · Accepted Answer · edited May 23 '17 at 10:24

History.js is your best bet for accomplishing this with cross browser support. You should realize that older browsers do not support direct manipulation of the URL and the hash tag (#) mechanism is used in its place.

Here is a portion of their getting started section:

(function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

Check out these examples using HTML5 pustState directly:

Questions of a similar topic:

Other Resources:

change url with jquery like facebook messages

1 Answers1