CODEWITHSUNDEEP
jqueryfacebookurl
Osiris
Osiris

Reputation: 129

change url with jquery like facebook messages

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.

Upvotes: 0

Views: 779

Answers (1)

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

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:

Upvotes: 2

Related Questions