History API с jQuery - адресная строка меняется, но не обновляет div

Я смог легко использовать history.pushState, чтобы изменить содержимое моего div и заставить адресную строку отражать поддельный URL-адрес. Однако всякий раз, когда я нажимаю кнопки «назад/вперед», URL-адрес меняется обратно, но содержимое остается прежним. При вводе URL-адреса выдает ошибку. Кажется, у меня не работает первая часть API истории, но мне нужна помощь в изменении состояния.

Я довольно новый программист и пытаюсь создать свой веб-сайт на jQuery и сделать код как можно более кратким.

HTML-код:

<ul>
<li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
<li><button class="navButton" id="settings" href="./content/account_settings.php" name="settings" title="settings">Settings</button></li>
<li><button class="navButton" id="about" href="./content/about.php" name="about" title="About">About</button></li>
</ul>

<div id="mainContent"></div>

Javascript-код:

$(document).ready(function() {
    // INITIAL CONTENT ON FIRST LOAD
$("#mainContent").load('./content/start.php');

// CODE FROM HISTORY.JS 
(function(window, undefined) {
var History = window.History; 
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    History.log(State.data, State.title, State.url);
    });

    // EVENT LISTENER FOR NAVBUTTON CLASS TO REPLACE CONTENT IN MAINCONTENT DIV
$('.navButton').click(function(e) {
    e.preventDefault();
    pageurl = $(this).attr('name');
    $("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
    if (pageurl != window.location) {
        history.pushState('', $(this).attr('title'), $(this).attr('name'));
        }
    });

})(window);
});

Я установил history.js, но если мне не нужно его использовать, это было бы предпочтительнее. Я бы хотел, чтобы этот код был исправлен, чтобы кнопка «Назад» обновлялась, и это работало!


javascript jquery html5-history
person kcdev    schedule 01.03.2014    source источник
comment
Вам нужно оценить в своем событии изменения состояния, была ли нажата кнопка «Назад», а затем вытащить состояние из объекта истории и выполнить постепенное исчезновение/исчезновение на основе href   -  person Ohgodwhy    schedule 01.03.2014
comment
спасибо ohgodwhy, как бы мне это сделать? я должен добавить: 'code' window.addEventListener (popstate, function (e) { History.getState (location.pathname); }); 'code'?   -  person kcdev    schedule 03.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

Поэтому я решил эту проблему, добавив оператор if в popstate для сравнения URL-адреса и определения содержимого, загруженного в div mainContent. Работает! .. но обнаружил, что мое исходное состояние нажатия выдвигает несколько всплывающих состояний, чем больше вы нажимаете navButtons. Этот вопрос опубликован Не могу найти, где у меня есть цикл popstate, создающий несколько записей истории

window.addEventListener('popstate', function() {
    //WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
    if (location.pathname == "/index.php") {
        $("#mainContent").load("./content/start.php");
    } else {
        $("#mainContent").load("./content" + location.pathname + ".php");
    }
});
person kcdev    schedule 10.03.2014

arrow_upward
0
arrow_downward

Совет: используйте встроенное состояние истории html5, чтобы передать объекты или параметры или так далее...

Действие при отправке состояния в браузер:

history.pushState('{url:location}', $(this).attr('title'), $(this).attr('name'));

Действие, когда вы щелкнули назад или вперед с помощью браузера:

$(window).on('popstate', function(e){
        if(e.originalEvent.state != null){
              console.log("url to render"+e.originalEvent.state.url)
            }else{
              console.log("nothing in the state, do nothing")
            }
person РАВИ    schedule 10.03.2014
comment
превосходно. это работает лучше, чем то, что было у меня, плюс мне не нужно все время думать о location.pathname. Однако это все еще не удается, если мой атрибут имени в URL-адресе отличается от атрибута href, на который ссылается содержимое при нажатии кнопок «назад/вперед». например, URL-адрес настроек <li><button class="navButton" id="settings" href="./content/account_settings.php" name="settings" title="settings">Settings</button></li> создает URL-адрес настроек, но фактически ссылается на account_settings.php. При нажатии кнопки «Назад» возвращается ошибка 404. - person kcdev; 11.03.2014
comment
чтобы уточнить .. когда нажимается кнопка «Назад» со страницы обратно на страницу настроек. выдается ошибка 404. Первоначальная ссылка на страницу работает нормально. - person kcdev; 11.03.2014
comment
Это правильно, потому что API истории не будет вызывать страницу, а только изменит состояние страницы. Чтобы контент отображался правильно, когда вы нажимаете назад в соответствии с URL-адресом, вам нужно получить html через javascript или скрыть контент на самой странице и отобразить через css. - person РАВИ; 11.03.2014
comment
У меня есть несколько идей, как с этим справиться. Я попробую их и посмотрю, что произойдет. Кажется, мне все еще может понадобиться оператор if для сравнения URL-адреса с загруженным содержимым. Спасибо за помощь. - person kcdev; 11.03.2014