0

ディープリンクを可能にする写真のスライドショーを作成しています。ユーザーがスライドショーを進めると、URL バーのアンカー タグも更新され、誰かがアンカー タグのある 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 ライブラリを自分のページに含めないようにしています。古いブラウザーがサポートされていないことは、私には問題ありません。

4

2 に答える 2

2

history.js https://github.com/browserstate/History.js/を使用してそれを達成できるはずです。 デモページhttp://browserstate.github.com/history.js/demo/を確認してください。

replaceState関数は必要なことを行います。

history.js は HTML4 ブラウザでも replaceState 機能をエミュレートします - これには IE8 と IE9 が含まれます。

于 2012-07-26T21:15:47.127 に答える
1

これを実現するには、 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);
  }
});
于 2012-07-26T21:11:41.330 に答える