Question

我有一个我正在使用Ajax的网站，它使用pushState和popstate，它在HTML5浏览器中运行良好，但我想让它在HTML4浏览器，IE＆amp; 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

Answer 1

好吧也许问题是你没有以正确的方式使用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浏览器中的书签将按预期工作）

非HTML5浏览器的History.js实现

1 个答案: