Блог

Я наткнулся history.js в качестве возможного решения некоторых проблем, которые у меня возникают. Для веб-сайта, который я создаю, я решил создать статическую страницу, на которую будет загружаться мой контент. Итак, у меня было бы 3 раздела (один для заголовка, один для строки меню и один для содержимого) При нажатии на ссылку в меню эта страница будет загружена в раздел содержимого. Из-за этого весь трафик остается в index.php страница, поэтому, нажав на кнопку «Назад», я бы перешел к последнему посещенному контенту, но к последней посещенной странице. Насколько я понимаю, я могу решить это с помощью history.js .

Итак, на моей странице у меня есть несколько ссылок в строке меню, где вызывается функция onclick. Например

     <li><a href="javascript:void(0);" onclick="myprofile()" ><span>my profile</span></a></li>
    <li><a href="javascript:void(0);" onclick="mysettings()"><span>Settings<small> 
  

Функция будет выглядеть примерно так.

 function myprofile() {
$('#content').load('members.php');
}
function mysettings() {
$('#content').load('settings.php');
}
  

Я добавил немного javascript для history.js (найдено на этом форуме) И хотя это изменяет URL-адреса внутри моего index.php но при обратном нажатии он не загружает страницы. Как бы я позволил history.js работать, когда используются функции? (некоторые ссылки, в которых мне действительно нужны функции, поэтому простое включение загрузки внутри ссылки не было бы для меня вариантом)

 <script>
                    $(function() {

    // Prepare
    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;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
        var State = History.getState();
        $('#content').load(State.url);
        /* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):
        $.get(State.url, function(response) {
            $('#content').html($(response).find('#content').html()); });
        */
        });


    // Capture all the links to push their url to the history stack and trigger the StateChange Event
    $('a').click(function(evt) {
        evt.preventDefault();
        History.pushState(null, $(this).text(), $(this).attr('onclick'));
    });
});
</script>
  

Первым параметром History.pushState является «data», который предназначен для получения дополнительной информации.

Итак, чтобы сохранить запись истории, вы можете сделать это в своем событии click:

 History.pushState({ href: 'members.php' }, $(this).text(), $(this).attr('onclick'));
  

А затем, когда вы читаете его обратно, вы должны сделать это в своей истории.Функция Adapter.bind:

 $('#content').load(State.data.href);