Как бороться с обновлением страницы при использовании истории HTML5? - PullRequest
Новая
       38

Как бороться с обновлением страницы при использовании истории HTML5?

2 голосов
/ 30 декабря 2011

Я прочитал тонны учебных пособий и примеров безрезультатно, что заставляет меня задать свой вопрос здесь. Я разрабатываю веб-страницу с фиксированной боковой навигацией с динамическим содержимым div.

Проблема

Когда я нажимаю на ссылку, скажем, «загрузить», div содержимого будет отображать содержимое моей другой страницы «loadcourses.php», а затем с помощью истории API я изменю URL-адрес на «* 1007». php не изменится, я просто добавлю заголовок другой страницы и помечу его как параметр за ссылкой.

Далее, из динамически загружаемого контента, у меня есть несколько ссылок, чтобы показать содержимое каждого отдельного курса при нажатии. Важная часть лежит здесь, после того, как я нажму на любую ссылку, я должен проанализировать другой параметр на следующей странице, которая называется «course.php». Я установил свой href = 'http://mydomain.com/course.php?cid=CSC101'. Теперь у меня нет проблем с первой загрузкой с помощью динамического div, загрузкой содержимого и успешным получением идентификатора 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);
}

1 Ответ

0 голосов
/ 27 декабря 2013

да, парень, я слышал ту же проблему, но я исправил ее ... так что просто , когда вы нажмете обновить, браузер запросит страницу с сервера, и страница не будет там ..Для этого вам нужен файл .htaccess, который будет использоваться для перенаправления этих запросов в соответствующий файл php ... как, если URL-адрес www.you.com/coding, файл .htaccess будет сканировать кодирование слова, перенаправить запрос в coding.php ... внутри php, вам нужно получить URL запроса $ _SERVER ['REQUEST_URI'], затем выполнить некоторую фильтрацию ... если запрос удовлетворяет фильтрам ...HTML-страница вставлена ​​в этот php bla ..?>

, поэтому в html поместите значения, которые появятся при загрузке формы ... и это логика, которую я даже попробовал на своем веб-сайте Дензе и все заработало

...