如何在使用HTML5历史记录时处理页面刷新？

我已经通读了大量的教程和例子无济于事，这导致我在这里问我的问题。我正在开发一个带有动态内容div的固定侧导航的网页。如何在使用HTML5历史记录时处理页面刷新？

问题

当我点击一个链接，让我们说“负荷”，内容DIV将显示从我的其他网页“loadcourses.php”然后使用历史API，我将网址更改为内容'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); 
}

来源

2011-12-30 WarChild

尚需帮助这里，熟悉这种情况的人请提供一些帮助... – WarChild 2012-01-02 12:11:44

请帮助真正重要的问题在这里，因为很快... – WarChild 2012-01-02 14:58:53

请帮助!!!! – WarChild 2012-01-03 07:30:33

啊guyz我听到了同样的问题，但我固定它...它如此简单，当你点击刷新，浏览器会从服务器请求的页面和页面不会有.. 。为了迎合这一点，你需要一个.htaccess文件，它将用于将这些请求重定向到相应的php文件中......就像www.you.com/coding那样，.htaccess文件将扫描该文件编码，把请求重定向到coding.php ... 里面的php，你需要获取请求的$ _SERVER ['REQUEST_URI']的url然后做一些过滤... 如果请求满足过滤器.. 。在该php上嵌入一个html页面BLA .. ？>

所以在HTML把当你加载的形式，将有appered值...并且那是我甚至尝试过在我的网站deenze逻辑和它的工作

来源

2013-12-27 14:45:35 zedecliff

如何在使用HTML5历史记录时处理页面刷新？

回答

相关问题