1

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

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

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

非常感谢。如果您想查看它的实际效果，该网站就在这里。

4

5 回答 5

3

看看 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;
...

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

于 2013-06-18T03:17:54.997 回答
2

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

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

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

Caniuse 报告说历史 API 支持相当好。通常的嫌疑人（IE 7 和 8）没有支持，但有polyfills 可用。

History API 的唯一警告（它是一个重要的）是：您作为第三个（可选）参数传递给的页面history.pushState必须存在于您的服务器上。用户可以从 URL 栏中复制 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 事件（在MDN 文档页面上提供 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
    }
});
于 2013-06-18T03:37:28.980 回答
2

在 URL 中放置一个井号标签怎么样？像这样的东西？

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

在代码的某个地方应该有一行？

<div id="about">
  <h2>About/h2>
  <!-- More content here -->
</div>
于 2013-06-18T02:59:48.827 回答
0

您的内容通过 AJAX 在单个 div 中加载。因此，回到以前的内容有点困难，因为您的内容已更新为新内容。

于 2013-06-18T03:12:30.950 回答
0

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

BACK 按钮通常会转到上一个 URL，并且在 AJAX 页面中，URL 不会自行更新。您可以使用“history.pushState”显式更改 URL，BACK 将按照您的预期工作。

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

于 2013-06-18T03:18:28.797 回答