.js を使用して、次のようなコンテンツを提供する Web サイトがあります。
var FluidNav = {
init: function() {
$("a[href*=#]").click(function(e) {
e.preventDefault();
if($(this).attr("href").split("#")[1]) {
FluidNav.goTo($(this).attr("href").split("#")[1]);
}
});
this.goTo("home");
},
goTo: function(page) {
var next_page = $("#"+page);
var nav_item = $('nav ul li a[href=#'+page+']');
$("nav ul li").removeClass("current");
nav_item.parent().addClass("current");
FluidNav.resizePage((next_page.height() + 40), true, function() {
$(".page").removeClass("current"); next_page.addClass("current");
});
$(".page").fadeOut(500);
next_page.fadeIn(500);
FluidNav.centerArrow(nav_item);
},
centerArrow: function(nav_item, animate) {
var left_margin = (nav_item.parent().position().left + nav_item.parent().width()) + 24 - (nav_item.parent().width() / 2);
if(animate != false) {
$("nav .arrow").animate({
left: left_margin - 8
}, 500, function() { $(this).show(); });
} else {
$("nav .arrow").css({ left: left_margin - 8 });
}
},
resizePage: function(size, animate, callback) {
if(size) { var new_size = size; } else { var new_size = $(".page.current").height() + 40; }
if(!callback) { callback = function(){}; }
if(animate) {
$("#pages").animate({ height: new_size }, 400, function() { callback.call(); });
} else {
$("#pages").css({ height: new_size });
}
}};
ここまでは順調ですが、クライアントはブラウザの戻るボタン機能を統合することを望んでいます。私は下調べを行い、SO や他の情報源の助けを借りて、pushState と popState がこれを達成するための最良の方法であることがわかりました。
上記のコードを少し読むと、次のことがわかります。
- ブラウザに website.com/#team と入力すると、#team ページではなくフロント ページが表示されます。#team に移動したい場合は、そこからクリックする必要があります。
- #team に移動してからフロント ページに戻りたい場合、[戻る] ボタンを押すと、Web サイトにアクセスする前の場所にリダイレクトされます。いわば追い出された。
これは、よりスムーズなブラウジング エクスペリエンスを目的として行われます。
ただし、次のことを達成する必要があり、上記の .js ファイルにどのような変更を加える必要があるかについて少し迷っています。
- 戻るボタン機能を実現する (ブラウザの履歴ストレージを操作する)
- URL バーに website.com/#team と入力すると、フロント ページではなくそのページに移動します。
この機能を使用して構築された Web サイトの例を次に示します。この機能がどのように機能するかを確認できます。http://themes.two2twelve.com/site/fluidapp/light/