Кросс-браузерная история jquery ajax с window.history.pushState и отступлением - PullRequest
Новая
       21

Кросс-браузерная история jquery ajax с window.history.pushState и отступлением

31 голосов
/ 23 ноября 2010

Я хочу реализовать историю навигации с использованием jQuery и AJAX в кросс-браузерной манере. Мой подход заключается в использовании window.history.pushState и переходе к хеш-URL /#!/url в браузерах, которые не поддерживают window.history.pushState.

Например: 

<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>

В браузерах, которые поддерживают window.history.pushState, нажатие на одну из этих ссылок должно изменить адрес без обновления страницы на http://domain.com/home, http://domain.com/about и т. Д. Если браузер не поддерживает window.history.pushState, он должен используйте идентификатор фрагмента, то есть: http://domain.com/#!/home, http://domain.com/#!/about.

Обновление: на основе отзывов здесь я реализовал Ajax SEO ( git ), который использует Адрес jQuery для API истории HTML5 со старым браузером с откатом на /#!/url.

Ответы [ 3 ]

22 голосов
/ 23 ноября 2010 
// Assuming the path is retreived and stored in a variable 'path'

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}
6 голосов
/ 06 мая 2011

Что-то, что я использовал с резервными URL-адресами хэша: 

History = History || {};
History.pathname = null;
History.previousHash = null;
History.hashCheckInterval = -1;
History.stack = [];
History.initialize = function () {
    if (History.supportsHistoryPushState()) {
        History.pathname = document.location.pathname;
        $(window).bind("popstate", History.onHistoryChanged);
    } else {
        History.hashCheckInterval = setInterval(History.onCheckHash, 200);
    }
};
History.supportsHistoryPushState = function () {
    return ("pushState" in window.history) && window.history.pushState !== null;
};
History.onCheckHash = function () {
    if (document.location.hash !== History.previousHash) {
        History.navigateToPath(document.location.hash.slice(1));
        History.previousHash = document.location.hash;
    }
};
History.pushState = function (url) {
    if (History.supportsHistoryPushState()) {
        window.history.pushState("", "", url);
    } else {
        History.previousHash = url;
        document.location.hash = url;
    }
    History.stack.push(url);
};
History.onHistoryChanged = function (event) {
    if (History.supportsHistoryPushState()) {
        if(History.pathname != document.location.pathname){
            History.pathname = null;
            History.navigateToPath(document.location.pathname);
        }
    }
};
History.navigateToPath = function(pathname) {
    History.pushState(pathname);

    // DO SOME HANDLING OF YOUR PATH HERE

};

Вы можете привязать события клика к этому с помощью: 

$(function(){
    $("a").click(function(){
        var href = $(this).attr('href');
        History.navigateToPath( href )
        return false;
    });
});

Если вам понадобится более подробное объяснение этого примера, я буду рад его услышать.

EDIT

Пожалуйста, смотрите мой другой ответ.

4 голосов
/ 08 ноября 2013

Прошло много времени с моего оригинального ответа , и я бы сейчас предложил использовать Backbone .

Реализация может быть: 

// First setup a router which will be the responder for URL changes:
var AppRouter = Backbone.Router.extend({

  routes: {
    "*path": "load_content"
  },

  load_content: function(path){
    $('#content').load('/' + path);
  }

});
var appRouter = new AppRouter;

// Then initialize Backbone's history
Backbone.history.start({pushState: true});

Выдержка из документации:

Чтобы указать, что вы хотите использовать поддержку HTML5 pushState в своем приложении, используйте Backbone.history.start({pushState: true}). Если вы хотите использовать pushState, но в браузерах, которые его не поддерживают, вместо этого используются полные обновления страниц, вы можете добавить {hashChange: false} к параметрам.

И теперь каждый раз, когда вызывается Backbone.history.navigate, AppRouter будет выполнять AJAX-загрузку пути в #content div.

Для обработки всех ссылок с AJAX вы можете использовать следующее: 

$("a").on('click', function(event){
    event.preventDefault();
    Backbone.history.navigate( event.currentTarget.pathname, {trigger: true} )
});

Обратите внимание на {trigger: true}, который вызывает вызов обработчика в маршрутизаторе (иначе только из-за изменения URL).

Скрипка с примером кода: http://jsfiddle.net/koenpunt/pkAz7/1/

...