使用 HTML5 History 时如何处理页面刷新？答案

【问题标题】：How to deal with page refresh when using HTML5 History?使用 HTML5 History 时如何处理页面刷新？
【发布时间】：2011-12-30 03:53:52
【问题描述】：

我已经阅读了大量的教程和示例，但无济于事，这导致我在这里提出我的问题。我正在开发一个带有动态内容 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 加载内容并在下一页成功检索 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);
}

【问题讨论】：

这里仍然需要帮助，任何熟悉这种情况的人请提供一些帮助...
请在这里解决真正重要的问题，很快就会到期......
身边有没有专家愿意伸出援助之手？

标签： javascript html pushstate history.js

【解决方案1】：

是的，伙计，我听说过同样的问题，但我已经解决了...它是如此简单，当您点击刷新时，浏览器将向服务器请求页面，而页面将不存在。 .. 为此，您需要一个 .htaccess 文件，该文件将用于将这些请求重定向到相应的 php 文件...例如，如果 url 是 www.you.com/coding，.htaccess 文件将扫描单词编码，将请求重定向到coding.php ... 在php中，您需要获取请求的url $_SERVER['REQUEST_URI'] 然后进行一些过滤... 如果请求满足过滤器...在该 php 上嵌入了一个 html 页面废话。。 ?>

所以在 html 中输入加载表单时会出现的值...这就是我什至在我的网站 deenze 中尝试过的逻辑，它起作用了

【讨论】：