如何使用JavaScript管理后退按钮

Question

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

我一直在做我的研究，没有做这件事，并且偶然发现了这篇文章。

我已经将此代码包含在我的网站中，并且对于用户每次在附加了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-divs切换，继续打开，URL读取www.site.com/editorial
用户单击VFX BTN-div切换出，现在在VFX页面上。 网址为www.site.com/vfx
用户单击后退按钮-现在调用相同的函数edit（）并返回到www.site.com/editorial

Answer 1

与HTML5一起，提供了一个History API，该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>等中是远程还是本地。

如何使用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