對於非HTML5瀏覽器的歷史.js實現

我有一個網站我正在使用Ajax它使用pushState和popstate，它在HTML5瀏覽器中效果很好，但我想讓它在HTML4瀏覽器中工作，IE & 8和IE9。對於非HTML5瀏覽器的歷史.js實現

我已經試過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

來源

2011-11-19 Rob Fenwick

你能澄清究竟是什麼問題呢？從快速瀏覽github history.js項目看起來很簡單，可以使用代碼片段的要點 – alonisser

可能的重複[Implementing History.js HTML4 Fallback]（http://stackoverflow.com/questions/7186466/implementing-歷史-JS-HTML4，回退） –

好吧，也許問題是你沒有以正確的方式使用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瀏覽器即會正常運行）

來源

2012-09-27 14:47:15

對於非HTML5瀏覽器的歷史.js實現

回答

相關問題