Question

我有一个单页网站，主要依赖于jQuery。作为一个组合，用户可以点击各种设计，其中jQuery将隐藏主页面，并根据查询字符串返回的内容重建设计页面。

问题是，想要回到主要投资组合页面的人自然会按下浏览器上的“返回”按钮，导致他们回到之前的任何网站（例如谷歌搜索）。事实上，预期的行为是他们返回主要行为。

我的问题是，实现一种方式的最佳方法是什么，以便BACK按钮的功能就像在多页网站上一样。它会涉及实现我自己的一堆查询吗？什么是最好的选择。

非常感谢。如果您希望看到它的实际效果，该网站为here。

Answer 1

查看History.js库，处理现代浏览器并为旧版HTML4浏览器提供备份

https://github.com/browserstate/history.js/

在$(".mLink").click(function(){...

中的事件处理程序中

每当您触发滚动时，您都可以添加类似

的内容

case "mL0":
    $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?home"); 
    break;
case "mL1":
    $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?portfolio"); 
    break;
...

美丽的投资组合网站，顺便说一句。

Answer 2

如何在网址中添加哈希标记？像这样的东西？

<a href="#about">About</a>

代码中的某处应该有一行吗？

<div id="about">
  <h2>About/h2>
  <!-- More content here -->
</div>

Answer 3

您可能需要查看HTML5 History API。有很多关于如何开始使用它的教程，但基本的要点是当你用jQuery加载一个新的“页面”时，你将它推到历史堆栈上：

// After loading the new page...
window.history.pushState({}, '', 'newpage.html');

即使页面从未加载，这也会使用户代理在URL栏中显示yoursite.com/newpage.html。

Caniuse报告history API support is fairly good。通常的嫌疑人（IE 7和8）没有支持，但有polyfills available。

历史API的唯一警告（并且它是一个重要的）是：您传递的页面作为history.pushState的第三个（可选）参数必须存在于您的服务器上 。用户可以从URL栏复制URL并共享它，因此页面名称必须与实际页面相对应。这样做的问题是，它似乎不适用于您的网站，因为您没有动态加载的单独页面。

在我看来，您的投资组合是一个连续的页面，所以我建议使用哈希网址。也就是说，yoursite.com/#about和yoursite.com/#contact等网址。您可以在加载新页面时更新window.location以包含哈希值（并且浏览器不会重新加载页面）。

window.location = '#new-page-that-was-just-navigated-to';

或者您可以更新window.location.hash。当您的网站加载此属性以确定应显示哪个页面时，您可以使用javascript检查哈希的内容。

$(document).ready(function() {
    switch(window.location.hash) {
        case 'home': // load home
        case 'about': // load about
        default: // load default page (index)
    }
});

此外，您可以使用HashChange event（MDN docs page上提供的polyfill）从您的HTML中抽象JS。而不是这样做：

<a href="javascript:void(0);" id="about">About</a>
<a href="javascript:void(0);" id="projects">Projects</a>
<a href="javascript:void(0);" id="contact">Contact</a>

<script>
document.getElementById('about').addEventListener('click', function() {
    // navigate to about page
}, false);

document.getElementById('projects').addEventListener('click', function() {
    // navigate to projects page
}, false);

//etc.
</script>

你可以这样做：

<a href="#about" id="about">About</a>
<a href="#projects" id="projects">Projects</a>
<a href="#contact" id="contact">Contact</a>

<script>
window.addEventListener('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
}, false);
</script>

这样做的好处是您的链接具有有意义的href，并且您不必为站点上的每个链接添加事件侦听器。只需为它们分配一个哈希并听取hashchange。

修改

请注意，这也适用于jQuery：

$(window).on('hashchange', function() { switch(window.location.hash) { case 'about': // load page case 'projects': // load page case 'contact': // load page default: // not found } });

Answer 4

您的内容通过AJAX在单个div中加载。因此，回到之前的内容有点困难，因为您的内容会使用新内容进行更新。

Answer 5

您可以使用“history.pushState”根据您点击的菜单条目更改网址...您可以查看此网页以获取示例 - http://html5.gingerhost.com/。

BACK按钮通常会转到上一个URL，而在AJAX页面中，URL本身不会更新。您可以使用“history.pushState”显式更改URL，而BACK将像您期望的那样工作。

这也将使您的网站搜索引擎友好

单页网站的后退按钮

5 个答案: