如何使用JavaScript管理返回按钮

我有一个由<div>标签制成的单个页面网站移动，隐藏，ect ..我需要能够将返回按钮控制运行DIVS的功能。

我一直在进行研究，没有如何做到这一点，并遇到了这篇文章。

我已经在我的网站中包含了此代码，并且每当用户单击使用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-divs Switch On，ON，在社论上，URL读取www.site.com/editorial
用户单击VFX BTN -DIVS开关，现在在VFX页面上。URL读取www.site.com/vfx
用户单击返回按钮 - 现在调用相同的函数edit（），然后返回www.site.com/editorial

以及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>中的远程或本地，等等。

相关内容

最新更新

热门标签：