Войти
Изменение URL без перезагрузки страницы
Опубликовано 01.06.2022 / Смотрели 122

Для браузеров, которые не поддерживают History API можно написать костыль с хэшами. Проверить, работает ли в вашем браузере эта фича можно так:

function isHhistoryApiAvailable() {
    return !!(window.history && history.pushState);
}

А теперь сделаем небольшое Демо. У нас будет страница с общим шаблоном (index.php):

 

Это общий шаблон, динамическое содержимое будет находиться в #content. Соответственно, страницы pageN.php не будут содержать в себе всего шаблона, а только контент. jQuery я подключил только для того, чтобы было меньше кода, так как будет ajax. Ниже приведен JS, который получает при клике на ссылку содержимое и вставляет его в #content.

$(document).ready(function() {
    $('a').click(function() {
        var url = $(this).attr('href');

        $.ajax({
            url:     url + '?ajax=1',
            success: function(data){
                $('#content').html(data);
            }
        });

        // А вот так просто меняется ссылка
        if(url != window.location){
            window.history.pushState(null, null, url);
        }

        // Предотвращаем дефолтное поведение
        return false;
    });
});

Параметр ajax=1 передается для того, чтобы сервер определил, что нам нужно. При начальной загрузке страницы этот параметр не будет отправлен, в этом случае возвращаем меню и скрипт. Если же параметр передан, то возвращаем только контент.

И еще небольшой кусочек кода, который делает рабочими кнопки “Вперед” и “Назад”.

$(window).bind('popstate', function() {
    $.ajax({
        url:     location.pathname + '?ajax=1',
        success: function(data) {
            $('#content').html(data);
        }
    });
});


Комментарии

80 + 27 =