后退按钮为单页网站

Back Button for a Single Paged Website

本文关键字：单页 网站 按钮      更新时间：2023-09-26

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

问题是，人们想要回到主要的投资组合页面将自然地按下返回按钮在他们的浏览器上，导致他们回到任何网站，他们之前在(例如谷歌搜索)。而实际上，预期的行为是它们返回到main。

我的问题是，什么是最好的方法来实现一种方式，使后退按钮的功能，如果它是在一个多页面的网站。它会涉及到实现我自己的查询堆栈吗?什么是最好的选择。

多谢。网址在这里，如果你想看看它的实际效果

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

漂亮的投资组合网站，顺便说一下。

在URL中放一个散列标签怎么样?像这样的?

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

在代码的某个地方应该有这样一行?

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

你可能想看看HTML5历史API。关于如何开始使用它有很多教程，但基本要点是，当您使用jQuery加载新"页面"时，将其推入历史堆栈:

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

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

Caniuse报告历史API支持相当好。通常的怀疑(IE 7和8)不支持，但有可用的填充。

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

在我看来，你的投资组合是一个连续的页面，所以我建议使用哈希url。即像yoursite.com/#about和yoursite.com/#contact这样的url。您可以在加载新页面时更新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
    }
});

你的内容是通过AJAX在一个div中加载的，所以回到以前有点困难，因为你的内容已经更新为新的。

您可以使用"history "。pushState"根据您单击的菜单项更改URL…您可以查看此网页中的示例- http://html5.gingerhost.com/。

BACK按钮通常会转到前一个URL，而在AJAX页面中URL不会自行更新。您可以使用"history"显式地更改URL。pushState"和BACK将像您期望的那样工作。

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

相关文章：