如何使用 JavaScript 管理后退按钮答案

【问题标题】：How to Manage the Back Button with JavaScript如何使用 JavaScript 管理后退按钮
【发布时间】：2017-10-05 03:15:23
【问题描述】：

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

我一直在研究如何做到这一点，并遇到了this 文章。

我已将这段代码包含在我的网站中，它非常适合在用户每次单击带有 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';
}

我的网站上有 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 - div 切换出来，打开编辑，URL 显示为 www.site.com/editorial
用户点击 VFX BTN - div 切换，现在在 VFX 页面上。网址为 www.site.com/vfx
用户单击返回按钮 - 现在调用相同的函数 edit() 并返回到 www.site.com/editorial

【问题讨论】：

我认为这应该有所帮助 - stackoverflow.com/questions/1844491/…

标签： javascript url back

【解决方案1】：

与 HTML5 一起，还有一个 History API，它允许您更改浏览器的状态，并更改 URL 路径名，但不重新加载页面，当单击按钮 forward 或 backward ，该页面的行为就像您的页面已重新加载一样，但事实并非如此。

请检查这个例子：

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

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

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

为了方便起见，我将这个 API 封装到一个插件中，您可以在

处查看

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

或者，顺便说一下，您实际上不需要重新加载远程数据，这只是一个示例，您可以将内容存储在您想要的任何位置，远程或本地在<body> 等。

【讨论】：