CODEWITHSUNDEEP
htmlurlhtml5-history
slevin
slevin

Reputation: 3888

html5 history api removes url hash

Maybe I am confused about the concept of history API. I try to create a URL like jakeandamir.com/?jake=insecure&amir=crazy#specificPart

I press a button and the jake=insecure added to the url normally via history.pushState.

I press another button and #specificPart is added to the url via location.hash =

Now if I press another button to add amir=crazy it gets added, but the #specificPart disappears.

I guess history API deletes it automatically (cause of the hash). But I want it, so the page scrolls down a specific part of the page like <a href="#specificPart">Here is a title of a cool article</a>.

So how can I do that? Hashes that denote page parts and historyAPI no longer work together? If so, is there another way to denote page parts in the url?

Or is there a hack , so the API and the hash get along?

Thanks in advance

UPDATE

the code

<button onClick="one();">one</button>
<button onClick="two();">two</button>
<button onClick="three();">three</button>

var finalqs;

function one(){
    addtothequerystring("c=1&d=2");
    history.pushState({page: "ajaxtwo"}, "ajaxtwo", finalqs);
}

function two(){
    addtothequerystring("e=1&f=2");
    history.pushState({page: "ajaxfour"}, "ajaxfour", finalqs);
}

function three(){
    addhastag("portion");
}

function addhastag(addthis){
    location.hash = addthis;
}

function addtothequerystring(addthis){
    if (finalqs.indexOf("?")===-1){
        finalqs+="?"+addthis;
    }
    else{
        finalqs+="&"+addthis;
    }           
}

Upvotes: 0

Views: 598

Answers (1)

JosiahDaniels
JosiahDaniels

Reputation: 2521

Whenever you call pushState, you need to make sure to preserve the hash:

window.history.pushState(null, "", url + window.location.hash);

Technically, the hash is just as much part of the url as anything else. When you call pushState you are overwriting the entire url (including the hash).

Update

function one(){
    addtothequerystring("c=1&d=2");
    history.pushState({page: "ajaxtwo"}, "ajaxtwo", finalqs + location.hash);
}

function two(){
    addtothequerystring("e=1&f=2");
    history.pushState({page: "ajaxfour"}, "ajaxfour", finalqs + location.hash);
}

Upvotes: 1

Related Questions