javascript - HTML5 履歴を使用しているときにページの更新を処理するにはどうすればよいですか?

Question

私はたくさんのチュートリアルと例を読んで役に立たなかったので、ここで質問しました。動的コンテンツ div を使用して、サイド ナビゲーションが固定された Web ページを開発しています。

問題

リンクをクリックすると、「ロード」としましょう。コンテンツ div には、他のページ「loadcourses.php」のコンテンツが表示されます。その後、履歴 API を使用して、URL を「http://mydomain.com/main」に変更します。 php?page=loadcourses'. 基本的に main.php は変更されません。他のページのタイトルを追加して、リンクの背後にあるパラメーターとしてタグ付けするだけです。

次に、動的に読み込まれたコンテンツから、クリックすると個々のコースのコンテンツを表示するリンクがいくつかあります。重要な部分はここにあります。リンクをクリックすると、「course.php」である次のページへの別のパラメーターを解析することになっています。href='http://mydomain.com/course.php?cid=CSC101' を設定しました。これで、動的 div がコンテンツをロードし、次のページで ID CSC101 を正常に取得することで、初めて問題なくロードできます。しかし、更新を押すと、cid が失われます。

戻る/進むボタンは、履歴 API に従って正常に機能します。ここで助けが必要です、ありがとう!! 私は現在、この .jsp プロトタイプに取り組んでいます。

document.addEventListener('DOMContentLoaded', init, false);

function hasBrowserHistory(){return !!(window.history && history.pushState);}
function updateHistory(url, replaceHistory) {
//Create a page path
var path  = "?page=" + url.split(".")[0];
var object = {
        data: url
    };

if(replaceHistory){
    //alert('as');
    /* 
    If this is the first page we are loading
    replace the current history item.
    */
    history.replaceState(object, null, path);
}else{
    //alert('qw');
    /*
    If we got here by clicking one of the links
    add a new item to the browser history
    */
    history.pushState(object, null, path);
}
}

function loadPage(whichPage, replaceHistory) {
$('#contentCol').load(whichPage);
updateHistory(whichPage, replaceHistory);
}

function historyPopStateHandler(e) {
//var state = history.state;
if (e.state == null) {
    alert(e.state.url);
}
if(e.state != null) {
    loadPage(e.state.data, true);
}
}

function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}

function init() {
//Check if the history API is available
if(!hasBrowserHistory()){
    alert('Sorry dude, your browser does not support the history API');
    return;
}       

//Check if we have any url params (e.g bookmark or reload)
var params = getUrlVars();

if(params['page'] != undefined && params['page'] != null){
    //Load the holder page with the correct content
    loadPage(params['page'] + ".jsp", true);
}else{
    //Load the default page
    loadPage('loadcourses.jsp', true);
}


//Setup listeners for the links
jQuery('nav > a').click(function(e){
    e.preventDefault();
    loadPage(jQuery(e.target).attr('href'), false);
});

//Setup listeners for the history events
window.addEventListener('popstate', historyPopStateHandler);
}