Question

我有一个单页网站，<div>标签移动，隐藏等等。我需要能够让后退按钮控制运行我的div的功能。

我一直在做我的研究没有怎么做，并且遇到了this文章。

我已将此代码包含在我的网站中，每次用户点击附加了doclick（）函数的按钮时，它都会通过递增主题标签号来更新网址。

var times = 0;
function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {       
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
    document.getElementById('message').innerHTML =      
        'Recorded <b>' + times + '</b> clicks';
}

我的网站上有4个按钮，名为doclick（）

<div onClick="edit(); doclick()">Editorial</div>
<div onClick="vfx(); doclick()">VFX</div>
<div onClick="audio(); doclick()">Audio</div>
<div onClick="color(); doclick()">Color</div>

我没有足够的经验来看看如何做我需要的东西。

现在我将每次点击存储在新哈希中，如何使用该数据来调用我已设置的特定功能？或者也许有更好的方法进行调整，而不是仅仅添加＃1，＃2等.URL将反映页面名称。比如www.site.com/vfx - 我可以使用该信息来调用函数。

使用示例：

我们从主页www.site.com开始
用户点击EDITORIAL BTN - divs切换，打开编辑，URL读取www.site.com/editorial
用户点击VFX BTN - 现在在VFX页面上将div切换出来。 URL读取www.site.com/vfx
用户点击后退按钮 - 现在调用相同的功能编辑（）并返回www.site.com/editorial

Answer 1

与HTML5一起，有一个History API，允许您更改浏览器的状态，并更改URL路径名，但不要在按钮forward或{{1时重新加载页面点击后，页面就像你重新加载页面一样，但事实并非如此。

请查看此示例：

backward

如果你仍然不明白我在说什么，请查看我最近的项目网站，虽然它使用WebSocket加载远程数据，你可以看到你点击文档的项目，页面不会重新加载，但会修改内容和网址。

http://cool-node.hyurl.com:3000/Docs

为方便起见，我已将此API包装到一个插件中，您可以在

处查看

https://github.com/Hyurl/soft-loader

或者，顺便说一句，您实际上并不需要重新加载远程数据，这只是一个示例，您可以将内容存储在var target = document.querySelector(".content"); //Initiate the state. history.replaceState({ title: document.title, content: target.innerHTML, }, document.title); //When the buttons forward or backward is clicked, change the state of //browser, and replace the target's content. window.onpopstate = function(e) { if (e.state) { document.title = e.state.title; target.innerHTML = e.state.content; } }; //Assuming you're using Ajax to load remote data. $.get("/something", function(data){ history.pushState({ title: data.title, content: data.content, }, data.title, data.url); document.title = data.title; target.innerHTML = data.content; });等所需的任何位置，远程或本地。

如何使用JavaScript管理后退按钮

1 个答案: