Question

我正在制作一个有图库的项目。图库的工作方式是用户遇到图像列表，每个图像都是一个“相册”，链接到给定图库的更多图像。我目前正在使用它，但是当用户在转到选定的图库后单击后退按钮时，它们不会被带回到相册列表中。例如，如果您是主页，请单击相册页面，然后打开图库。单击后退按钮后，您将返回主页。

所以我想解决这个问题，我可以使用历史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);
  }
}));

感谢任何帮助，谢谢

Answer 1

基本上你要做的是将你的专辑点击处理程序重构为一个函数，可以在初始化的外部中构建专辑视图，然后在点击专辑时调用该功能，并在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引用的代码中）。如果您添加“返回相册”按钮，您将执行类似的处理程序，但推送URL 没有查询var。

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在某些内容中）浏览器在页面加载时运行，但它不应该

将pushState（）和popstate添加到我的项目中

1 个答案: