Question

我正在创建一个允许深层链接的照片幻灯片。当用户通过幻灯片进行推进时，URL栏中的锚标记也会更新，如果有人使用锚标记访问该URL，则首先显示该幻灯片。示例网址：

http://domain.com/news/some-article-slug/#/slide5

我这样做只需将window.location.hash传递给对象：

start: window.location.hash.substring(7), // eg. "#/slide5"

// ...

var startingSlide;
this.start = 0;
this.deeplink = this.options.start != null;

if (this.deeplink) {
  startingSlide = Number(this.options.start);
  if (startingSlide > 0 && startingSlide <= this.total) {
    // use that number as the starting slide
  }
}

// ...

this.slides.bind("switch", function(idx) {
  if (_this.deeplink) {
    return window.location.hash = "/slide" + (idx + 1);
  }
});

这一切都很好用。我的问题如下：

当用户查看幻灯片和URL锚点更新时，这些都在浏览器的历史记录中注册，因此使用浏览器的后退按钮只会返回锚点。我想要发生的是后退按钮返回上一个加载的页面。

Imgur有我正在寻找的确切行为。这是一个真实的例子：

http://imgur.com/a/XCUET#0

尽管如此，Imgur的javascript已经缩小了，所以我无法通过阅读来了解它是如何完成的。

谢谢！

更新

我最终使用了这样的东西：

var slidePath;

if (this.deeplink) {
  slidePath = [window.location.pathname, "/slide" + (idx + 1)].join("#");
  window.history.replaceState(null, window.title, slidePath);
}

我决定不使用History.js有几个原因 - 我试图不在我的页面上包含任何更多的JS库，当我试图包括它时，它也给我带来了一些麻烦它。对我来说，对旧浏览器缺乏支持是可以的。

Answer 1

您应该可以使用history.js https://github.com/browserstate/History.js/来完成它检查他们的演示页面http://browserstate.github.com/history.js/demo/。

replaceState 功能可以满足您的需求。

history.js也将在HTML4浏览器中模拟replaceState功能 - 包括IE8和IE9。

Answer 2

您可以使用history.replaceState()来完成此任务。

this.slides.bind("switch", function(idx) {
  if (_this.deeplink) {
    var newUrl = window.location + "#/slide" + (idx + 1);
    return window.history.replaceState(null, window.title, newUrl);
  }
});

使用网址锚点深层链接相册，无需劫持后退按钮

2 个答案: