javascript - 在不加载新页面的情况下更改 url

Question

对于我的单页网站，我有一个元素索引。如果单击一个元素，它会在同一页面上打开一个幻灯片。所以基本上，我只有一个 URL，如果有人想链接到一个特定的元素，他们就不能。

我正在努力做到，如果我点击一个元素，它就会更改 URL。因此，该 URL 可用于在打开该元素的情况下访问我的网站。

Here是我目前拥有的链接。

作为引用，我正在努力实现在这个 site 上找到的东西.

我发现了一些好的建议 here ，但是当我使用类似这样的东西(如下)时会发生什么，会创建一个新的 URL，但如果我将该 URL 租用到浏览器中，它不会打开元素。

<a href="#" id='click'>Click to change url to bar.html</a>

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

Answer 1

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

您可以使用 `window.onpopstate 来感知后退/前进按钮导航

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

如果有人能帮我检查一下，我会很感激