Question

我没有理解history.js的概念。如果有人可以用ELI5条款帮助我理解这一点，那真的会帮助我。我有一个链接到主页按钮的徽标，如下所示：

<h1 class="site-title">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" data-title="<?php bloginfo('name'); ?>">
    <img src="<?php bloginfo( 'template_url' ); ?>/img/logo.png" alt="logo" height="89" width="70">
  </a>
</h1>

这是将状态推向历史的功能：

$('.site-title a').on('click', function(e) {
  e.preventDefault();
  History.pushState(null, site.title, site.url);

  // Some things that happen when I hit the home button
  $('#project-wrapper').removeClass('activated').css('max-height', '');
  $('article.project').removeClass('grayscale grayscale-fade').css('opacity', '1');
});

在该功能之外，我有这个（使用history.js）：

var History = window.History;

History.Adapter.bind(window, 'statechange', function(){
    var State = History.getState();
    History.log(State.data, State.title, State.url);
});

由于我的主页链接有一个e.preventDefault，我该如何让它进入主页并让用户能够点击后退按钮并使其全部正常运行？现在，当我点击按钮时，它只是将页面推送到历史堆栈。

Answer 1

当你开始使用历史api时，有很多活动的部分，但是一个简单的例子包含3个主要部分。

初始页面加载，我们要么生成页面服务器端，要么使用某种标记来加载客户端（如url）。
在用户事件上发生的伪页面加载（单击等）。此事件需要触发推送状态以及加载要显示的内容。
历史事件（onpopstate，statechange）上发生的伪页面加载。您可以使用的唯一数据是您之前推送状态时存储的数据。

一个非常简单的示例，包含一些虚拟代码：

页面加载：

//since you're using the history.js
var History = window.History;

/*the state data is really important, as you'll need it when you 
  come back to this original state to know what to load */
Var initialData = { pageId : <current page ID> };

//we replace the state because the initial page load state doesn't have our data
History.replaceState(initialData, <initialTitle>, <initialUrl>);

设置我们的loadPage函数

function loadPage(pageId){
   //grab page data based on unique identifier
   $.post('yourserver.whatever', { ID : pageId }, function(resp){
      // put your content where it needs to go
      $('<main content section>').html(resp);
   });
};

用户事件

$('a').on('click',function(){
   var newData = { pageId : <next page ID> };

   //should generally match link href with state url
   History.pushState( newData, <next page Title>, $(this).attr('href') );
   loadPage(newData.pageId);
});

历史事件

History.Adapter.bind(window, 'statechange', function(){
    var State = History.getState();
    loadPage(State.data.pageID);
});

这是历史API的一个非常基本的实现，我浏览了一堆小东西。需要注意的是一些潜在的陷阱，尤其是：

有些浏览器会在页面加载时触发popstate，这是您必须考虑/处理的内容（因为您使用兼容性库时，大部分错误应该被平滑掉）。
你想要一个绝对需要javascript运行的系统吗？或者你是否会缺乏javascript支持？
Ajax调用性能，确保在刷新内容等时先前绑定的事件会反弹。

Answer 2

也许我并不真正理解你想要达到的目标，但是你不应该删除e.preventDefault()声明吗？或者以其他方式做这样的事情（看看最后一行，我明确地发送给用户）：

$('.site-title a').on('click', function(e) {
    e.preventDefault();
    History.pushState(null, site.title, site.url);

    // Some things that happen when I hit the home button
    // ... do that stuff

    // and explicitly send the visitor to your homepage
    window.location = $(this).attr('href');
});

Answer 3

完成所有事情后，您将完成所有事情。在$('.site-title a').on('click', ...功能中，您可以将主页链接指定给window.location以在那里导航。

$('.site-title a').on('click', function(e) {
  e.preventDefault();
  History.pushState(null, site.title, site.url);

  // Some things that happen when I hit the home button
  $('#project-wrapper').removeClass('activated').css('max-height', '');
  $('article.project').removeClass('grayscale grayscale-fade').css('opacity', '1');

  //perform the page navigation now
  window.location.href = $(this).attr('href');
});

使我的主页按钮与history.js一起使用

3 个答案: