Question

也许我对历史API的概念感到困惑。我尝试创建一个类似jakeandamir.com/?jake=insecure&amir=crazy#specificPart

的网址

我按下按钮，jake=insecure通常会通过history.pushState添加到网址。

我按下另一个按钮，#specificPart

将location.hash =添加到网址

现在，如果我按下另一个按钮添加amir=crazy，它会被添加，但#specificPart会消失。

我猜历史API会自动删除它（哈希的原因）。但我想要它，所以页面向下滚动页面的特定部分，如<a href="#specificPart">Here is a title of a cool article</a>。

那我怎么能这样做？表示页面部分和历史记录API的哈希不再一起工作？如果是这样，是否有另一种方法来表示网址中的页面部分？

或者是否有黑客，所以API和哈希相处得很好？

提前致谢

更新

代码

<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;
    }           
}

Answer 1

每当你致电pushState时，你需要确保保留哈希：

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

从技术上讲，哈希与其他任何内容一样都是网址的一部分。当您致电pushState时，您将覆盖整个网址（包括哈希）。

<强>更新

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);
}

html5历史api删除url哈希

1 个答案: