jQuery AJAX и History API

192

01 апреля 2018, 18:41

Есть код, который при помощи AJAX подгружает в нужный тег данные со страницы.
Как сделать, чтобы работали кнопки вперед / назад в браузере?

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h6>Это кароче наша страница!</h6>
    <a href="content1.html" class="link">Клик</a>
    <a href="content2.html" class="link">Клик</a>
    <a href="content3.html" class="link">Клик</a>
    <div class="content"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="jquery.history.js"></script>
    <script>
        $(document).ready(function() {
            $('.link').click(function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
                console.log($(this).attr('href'));
                $.ajax({
                    url: url,
                    success: function(data) {
                        //Самый усреднённый вариант, но можно и передать полученную информацию в собственный обновлятель страницы
                        $('.content').html(data);
                    }
                });
                window.history.pushState(null, null, url);
                return false;
            });
            $(window).bind('popstate', function() {
                $.ajax({
                    url: history.location,
                    success: function(data) {
                        $('.content').html(data);
                    }
                });
            });
        });
    </script>
</body>
</html>