使用HTML5歷史記錄時如何處理頁面刷新？

Question

我通讀了大量的教程和示例，無濟於事，這使我在這里提出自己的問題。 我正在開發一個帶有動態內容div的固定側面導航的網頁。

問題

當我單擊鏈接時，例如說“加載”，內容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就沒有問題，動態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);
}

Answer 1

是的，我聽到了同樣的問題，但我已解決了它。它是如此簡單 ，當您單擊刷新時，瀏覽器將向服務器請求該頁面，而該頁面將不存在...以解決此問題，您需要一個。 htaccess文件，該文件將用於將這些請求重定向到相應的php文件...例如，如果該網址是www.you.com/coding，則.htaccess文件將掃描文字編碼，將請求重定向到encoding.php ...在php內部，您需要獲取請求$ _SERVER ['REQUEST_URI']的網址，然后進行一些過濾...如果請求滿足過濾條件...則在該php bla上嵌入了html頁面。 ？>

因此，在html中放置了加載表單時將要貼上的值...這就是我什至在我的網站deenze中嘗試過的邏輯，它也有效