如何使用 JavaScript 管理后退按钮

Question

我有一个用 <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
用户点击社论 BTN - div 关闭，在社论上打开，URL 读取 www.site。com/editorial
用户点击 VFX BTN - div 切换出来，现在在 VFX 页面上。 URL 读作 www.site。com/vfx
用户点击后退按钮 - 现在调用相同的函数 edit() 并返回到 www.site。com/editorial

Answer 1

与 HTML5 一起，还有一个历史记录 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加载远程数据，但你可以看到当你点击文档项时，页面不会重新加载，但内容和URL将被修改。

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

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

查看

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

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

如何使用 JavaScript 管理后退按钮

How to Manage the Back Button with JavaScript

javascript

url

back