私は1年前に行われたcodeigniter Webサイトを持っています。いいえ、新しい HTML5 history API (pushstate) 関数を実装して、ヘッダーを更新せずに URL に基づいてコンテンツを変更できるようにしたいと考えています。URL の再構築を回避し、新しい HTML5 履歴 API を使用してコンテンツ全体を読み込む簡単な方法はありますか? 私は何らかの方法を見つけようとしていましたが、それらのほとんどは get メソッドを使用しています。
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.replaceState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
}
このデモは次のとおりです: http://sandbox.cergis.com/html5-historyAPI/page1.php