如何使用JavaScript管理后退按钮

Question

I have a single page site made with <div> tags moving, hiding, ect.. I need to be able to have the back button control the functions running my divs. 我有一个由<div>标签移动，隐藏等组成的单页站点。我需要能够使后退按钮控制运行div的功能。

I have been doing my research no how to do this and came across this article. 我一直在做我的研究，没有做这件事，并且偶然发现了这篇文章。

I have included this code in my site and it works great for updating the URL with incrementing hashtag numbers every time the user clicks a button with the doclick() function attached. 我已经将此代码包含在我的网站中，并且对于用户每次在附加了doclick（）函数的情况下单击按钮时，使用递增的＃标签号更新URL都非常有用。

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

I have 4 buttons on my site calling doclick() 我的网站上有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>

I am not experienced enough to see how to do what I need though. 我没有足够的经验去了解如何做我需要的事情。

Now that I am storing every click in a new hash, how can I use that data to call specific functions I already have setup? 现在，我将每次点击存储在新的哈希中，如何使用这些数据来调用已经设置的特定功能？ Or maybe there is a better way to tweak so that instead of just adding #1, #2 etc.. URL will reflect page name. 或者，也许有更好的调整方法，而不是仅添加＃1，＃2等。URL将反映页面名称。 Like www.site.com/vfx - And I could use that information to call a function. 就像www.site.com/vfx一样-我可以使用该信息来调用函数。

Example Usage: 用法示例：

We start on home page www.site.com 我们从主页www.site.com开始
User clicks EDITORIAL BTN - divs switch out, on on Editorial, URL reads www.site.com/editorial 用户点击EDITORIAL BTN-divs切换，继续打开，URL读取www.site.com/editorial
User clicks VFX BTN - divs switch out, now on VFX page. 用户单击VFX BTN-div切换出，现在在VFX页面上。 URL reads www.site.com/vfx 网址为www.site.com/vfx
User clicks back button - now calls same function edit() and goes back to www.site.com/editorial 用户单击后退按钮-现在调用相同的函数edit（）并返回到www.site.com/editorial

Answer 1

Along with HTML5, there is a History API, which allows you change the state of the browser, and change the URL path-name, but do not reload the page, when the buttons forward or backward is clicked, the page will be act just like you page has been reloaded, but it's not. 与HTML5一起，提供了一个History API，该API可让您更改浏览器的状态并更改URL路径名，但不重新加载页面，当单击forward或backward按钮时，该页面仅用作操作就像您的页面已重新加载，但事实并非如此。

Please check this example: 请检查以下示例：

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

If you are still not understand what I'm saying, please check my recent project's website, though it uses WebSocket to load remote data, you can see when you click the items of documentations, the page won't be reload, but the content and URL will be modified. 如果您仍然不明白我在说什么，请检查我最近的项目的网站，尽管它使用WebSocket加载远程数据，但是当您单击文档项时可以看到，该页面不会被重新加载，但是内容和网址将被修改。

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

And for convenience, I have wrapped this API to a single plugin, you can check it out at 为了方便起见，我将此API包装到单个插件中，您可以在以下位置查看

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

Or, by the way, you don't actually need to reload remote data, this is just an example, you can store you content anywhere you want, remote or local in the <body> , etc. 或者，顺便说一句，您实际上不需要重新加载远程数据，这只是一个示例，您可以将内容存储在任何位置，在<body>等中是远程还是本地。

如何使用JavaScript管理后退按钮

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-05 05:17:01

如何使用JavaScript管理后退按钮

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-05 05:17:01

解决方案1
1 已采纳 2017-10-05 05:17:01