Реализация History.js для браузеров без HTML5 - PullRequest
Новая
       18

Реализация History.js для браузеров без HTML5

0 голосов
/ 20 ноября 2011

У меня есть веб-сайт, над которым я работаю, который использует Ajax, он использует pushState и popstate, он прекрасно работает в браузерах HTML5, но я хочу, чтобы он работал в браузерах HTML4, IE & 8 и IE9.

Я пробовал History.js, https://github.com/browserstate/History.js/, но не могу на всю жизнь выяснить, как это реализовать.кто-нибудь может дать мне несколько советов?

Вот код, который я использую для HTML5, 

if (history.pushState) {

    function currentPage(url){

    var index = /index/g,
        program = /program/g,
        photos = /photos/g,
        testimonials = /testimonials/g,
        about = /about/g,
        contact = /contact/g;

    if (program.test(url)){
        changeCurrentPage('#program');
        document.title = "Our Programs Kolibri Daycare";

    }else if (photos.test(url)){
        changeCurrentPage('#photos');
        document.title = "Photos Kolibri Daycare";

    }else if (testimonials.test(url)){
        changeCurrentPage('#testimonials');
        document.title = "Tesimonials Kolibri Daycare";

    }else if (about.test(url)){
        changeCurrentPage('#about');
        document.title = "About Kolibri Daycare";

    }else if (contact.test(url)){
        changeCurrentPage('#contact');
        document.title = "Contact Kolibri Daycare";
    }else {
        changeCurrentPage('#home');
        document.title = "Kolibri Daycare";
    }
}

function changeContent(url) {
    $.ajax({
        url: "getContents.php?url=" + url,
        success: function(responseText){  
            $("#content").html(responseText);  
        }
    });
    currentPage(url);
}

$(document).ajaxComplete(function(event, request, settings) {
    if (settings.url == 'getContents.php?url=photos.html') {
        $("a[rel=example_group]").fancybox({
            'overlayShow'   : false,
            'cyclic'        : true,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic'
        });
    }
});



$(document).ready(function() {
    var elems = null,
        links = null,
        link = null,
        i;

    elems = document.getElementById('nav');
    links = elems.getElementsByTagName('a');

    if (links) {
        for (i = 0; i < links.length; i++) {
            links[i].addEventListener("click", function(e) {
                    var url = $(this).attr("href");
                    changeContent(url);
                    history.pushState(null, null, url);
                    e.preventDefault();

                }, false);
            }
        }

        window.setTimeout(function() {
            /*window.addEventListener("popstate", function(e) {*/
        window.onpopstate = function (e) {
            var pathArray = window.location.pathname.split( '/' );
            var n = pathArray.length;
            if (pathArray[n-1]){
            changeContent(pathArray[n-1]);
        }else {
            changeContent('index.html');

        }
    /*}, false);*/
    }
    }, 1);
});
}

Вот ссылка на тестовый сайт.http://robfenwick.com/kolibri4/index.html

1 Ответ

0 голосов
/ 27 сентября 2012

Хорошо, возможно, проблема была в том, что вы неправильно использовали History.js (у меня тоже была проблема). В основном, чтобы использовать History.js правильно, вы должны сделать что-то вроде: 

// Register navigation click handlers where you will load Ajax content
$( window ).on( 'click', 'a.ai1ec-load-view', handle_click_on_link_to_load_view );
// Bind to the statechange event
$( window ).bind( 'statechange', handle_state_change );

// When the state changes, load the corresponding view
var handle_state_change = function( e ) {
    var state = History.getState();
    load_view( state.url, 'json' );
};

// When clicking on a link you want to load, trigger statechange by changing state
var handle_click_on_link_to_load_view = function( e ) {
    e.preventDefault();
    History.pushState( { target :this }, null, $( this ).attr( 'href' ) );
};

До этого я не слушал statechange и просто использовал pushState () в обработчике щелчков ссылок.

Если вы сделаете это так, нет необходимости кодировать запасной вариант, он также будет работать в браузерах html4 (и закладки из браузеров html4 будут работать как положено)

...