History.js и обновление вручную на странице

Question

Я работаю с History.js, и я пытаюсь получить URL-адрес в качестве URL-адреса Google Plus.

(function(window, undefined){ 


var History = window.History; // Note: We are using a capital H instead of a lower h 
if (!History.enabled) { 
    // History.js is disabled for this browser. 
    // This is because we can optionally choose to support HTML4 browsers or not. 
    return false; 
} 


History.Adapter.bind(window, 'statechange', function(){ // Note: We are using statechange instead of popstate 

    var State = History.getState(); // Note: We are using History.getState() instead of event.state 
    History.log(State.data, State.title, State.url); 
    console.log(State.data.page); 
}); 



$('.item').live('click', function(e){ 
    e.preventDefault(); 
    var url = $(this).children(1).attr('href'); 
    $(document).remove('#content'); 
    $('#loaded').load('/controlpanel' + url + '.php #content'); 
    History.pushState({page: url + '.php'}, "Prova Pagina", History.getRootUrl() + 'controlpanel' + url); // logs {state:1}, "State 1", "?state=1" 
}); 

}) (окно);

Этот скрипт работает, когда я нажимаю на ссылку, но когда я вручную обновляю страницу, и я уже нажал на ссылку, а url станет http://www.mysite.com/something/page, браузер дает мне ошибку 404. Как я могу это решить?

Я хотел бы получить что-то вроде: https://plus.google.com/explore

Answer 1

Даже если JS позволяет не перезагружать всю страницу, то URL должен еще быть доступен на стороне сервера, так что кто-то доступ непосредственно по ссылке будет увидеть что-то (не говоря уже о грациозной деградации).

Кроме того, вы должны добавить обработчик клика по привязным ссылкам, чтобы можно было предотвратить действие по умолчанию (переход к ссылке) и использовать метод pushState для изменения URL-адреса. Что-то вроде этого:

document.body.onclick = function(e) { 
    var evt = e || window.event, 
     target = evt.target || evt.srcElement // Get the target cross-browser 

    // If the element clicked is a link 
    if (target.nodeName === 'A') { 

     // Use the History API to change the URL 
     History.pushState() // Use the library correctly 

     // Don't forget to return false so that the link doesn't make you reload the page 
     return false 
    } 
} 

Это, безусловно, не код продукции (вы должны проверить внешние ссылки, не свяжете на теле, и т.д.), но вы получите идею.