javascript - 将pushState()和popstate添加到我的项目中

我有一个正在处理的项目有一个画廊。画廊的工作方式是为用户提供一系列图像，每个图像都是一个“专辑”，链接到给定画廊的更多图像。我目前可以使用该功能，但是当用户转到选定的画廊后单击“后退”按钮时，不会将他们带回到相册列表中。例如，如果您是主页，则单击相册页面，然后打开一个图库。单击后退按钮后，您将返回首页。

因此，我想解决此问题，可以使用历史记录api并使用pushState和popstate。我的问题是我无法使其正常运行，并且不确定将函数放置在给定脚本中的位置。

如果您希望我拥有该网站的实时版本，请在这里进行操作：Live Demo

这是我当前的脚本：

(function(code) {
  code(window.jQuery, window, document);
}(function($, window, document) {
  $(function() {
    initialize();
  });

  function initialize() {
    $.getJSON('/assets/js/images.json', function(json) {
      $.each(json.albums, function(i, item) {
        var photos = item.photos,
            name   = item.name,
            id     = item.id;

        showAlbums(photos, name, id);
      });
    });
  }
  function showAlbums(p, n, i) {
    var albums    = $('.albums'),
        gallery   = $('.gallery'),
        album     = $('#templates #album .thumb').clone(true),
        thumbnail = album.find('.thumbnail'),
        image     = album.find('.image'),
        caption   = album.find('.caption h4');

    thumbnail.attr('href', '#').attr('title', n).attr('data-url', i);
    image.attr('src', p[0].href).attr('alt', n);
    caption.html(n);

    albums.append(album);

    album.on('click', 'a', function(e) {
      e.preventDefault();
      albums.hide();
      gallery.empty().show();
      document.title = "Schultz | " + n;
      $.each(p, function(i, item) {
        var photo = item.href;
        showGallery(photo, n);
      });
    });
  }
  function showGallery(p, n) {
    var gallery = $('.gallery'),
        images  = $('#templates #gallery .thumb').clone(),
        link    = images.find('.thumbnail'),
        image   = images.find('.thumbnail img');

    link.attr('href', p).attr('title', n).attr('data-gallery', '');
    image.attr('src', p).attr('alt', n);

    gallery.append(images);
  }
}));

任何帮助表示赞赏，谢谢

最佳答案

本质上，您要做的是将相册点击处理程序重构为一个函数，该函数可以在初始化之外调用以构建相册视图，然后在单击相册时以及在popstate上（后退/前进）调用该函数。

为此，您应该存储对要构建画廊的JSON数据的引用（数据本身或用于检索它的XHR）。这样，我们可以编写一个“ showAlbum”函数，该函数取一个索引或ID，我们可以用它来访问数据中的选定专辑。

所以像这样：

// As you're doing your initialization, process the JSON array of albums
// into a hash by ID (this is one of many ways to go about this, a more
// robust solution would be to use the XHR promise to ensure the JSON is
// always there when you need it).
var albumData = {};

function initialize () {
  $.getJSON('/assets/js/images.json', function(json) {
    $.each(json.albums, function(i, item) {
      var photos = item.photos,
          name   = item.name,
          id     = item.id;

      // Same as you have now, but with this line:
      albumData[id] = item;

      showAlbums(photos, name, id);
    });
  });
}


// Then we create a function to show an album by ID, essentially the same as
// your click handler now, but retrieving the data from the structure we
// built out of the JSON.
function showAlbumById (id) {
  e.preventDefault();
  var album = albumData[id]
    , photos = album.photos
    , name = album.name;
  albums.hide();
  gallery.empty().show();
  document.title = "Schultz | " + n;
  $.each(photos, function(i, item) {
    showGallery(item.href, name);
  });
});

然后，您将替换相册点击处理程序，以推送状态并调用该函数。在这里，我使用查询变量来表示URL中的状态，为了清楚起见，使用theAlbumId（在代码中由i引用）。如果您添加“返回相册”按钮，则可以执行类似的处理程序，但要推送网址
没有查询变量

album.on('click', 'a', function(e) {
  e.preventDefault();
  history.pushState({}, '', '?id='+theAlbumID);
  showAlbumById(theAlbumId);
});

那应该处理东西的pushState部分，但是东西的popstate部分需要更多的工作。我们需要能够在两种状态之间来回移动：显示单个专辑，或显示专辑索引。为此，您需要为popstate事件添加一个处理程序。

// define `onpopstate` or add a listener for `popstate` on the window
window.onpopstate = function (state) {
  // pseudocode, you'd need to write or find a function to pull query vars
  var albumId = getQueryParameter('id');

  // if an album ID is in the query string, show it
  if (albumId) {
    showAlbumById(albumId);
  }
  // otherwise show the index (this should probably be another function)
  else {
    albums.show();
    gallery.empty().hide();
    document.title = "Schultz";
  }
};

然后，最后，要处理用户刷新页面或直接访问专辑URL的问题，您还希望在页面加载时检查查询字符串以获取专辑ID，并像在popstate中一样显示专辑（popstate在某些浏览器上运行页面加载，但不应该）

关于javascript - 将pushState()和popstate添加到我的项目中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38132751/