Wtyczka JQuery History.js nie zastępuje stanu jednej strony w przeglądarkach HTML4 i HTML5

Question

Używam interfejsu JQuery History.js plugin do włączania interfejsu API historii w przeglądarkach HTML5 i emulacji w przeglądarkach HTML4. Używam Ajaxify script do wdrożenia tej wtyczki. Zmieniłem ten skrypt trochę jak pokazano:

var History, $, document; 
function PrepareVariables() { 
    History = window.History, 
    $ = window.jQuery, 
    document = window.document; 
} 

function InitHistory() { 
    // Prepare Variables 
    var 
    /* Application Specific Variables */ 
    //contentSelector = '#content,article:first,.article:first,.post:first', 
    contentSelector = '#navcontent'; 
    $content = $(contentSelector), //.filter(':first'), 
    //contentNode = $content.get(0), 
    $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'), 
    activeClass = 'active selected current youarehere', 
    activeSelector = '.active,.selected,.current,.youarehere', 
    menuChildrenSelector = '> li,> ul > li', 
    completedEventName = 'statechangecomplete', 
    /* Application Generic Variables */ 
    $window = $(window), 
    $body = $(document.body), 
    rootUrl = History.getRootUrl(), 
    scrollOptions = { 
     duration: 800, 
     easing: 'swing' 
    }; 

    // Ensure Content 
    if ($content.length === 0) { 
     $content = $body; 
    } 

    // Internal Helper 
    $.expr[':'].internal = function (obj, index, meta, stack) { 
     // Prepare 
     var 
     $this = $(obj), 
      url = $this.attr('href') || '', 
      isInternalLink; 

     // Check link 
     isInternalLink = url.substring(0, rootUrl.length) === rootUrl || url.indexOf(':') === -1; 

     // Ignore or Keep 
     return isInternalLink; 
    }; 

    // HTML Helper 
    var documentHtml = function (html) { 
     // Prepare 
     var result = String(html) 
      .replace(/<\!DOCTYPE[^>]*>/i, '') 
      .replace(/<(html|head|body|title|meta|script)([\s\>])/gi, '<div class="document-$1"$2') 
      .replace(/<\/(html|head|body|title|meta|script)\>/gi, '</div>'); 

     // Return 
     return $.trim(result); 
    }; 

    // Ajaxify Helper 
    $.fn.ajaxify = function() { 
     // Prepare 
     var $this = $(this); 

     // Ajaxify 
     //$this.find('a:internal:not(.no-ajaxy)').click(function (event) { 
     $this.find("a[data-isnav='0']").click(function (event) { 
      // Prepare 
      var 
      $this = $(this), 
       url = $this.attr('href'), 
       title = ($this.attr('title') || null); 

      // Continue as normal for cmd clicks etc 
      if (event.which == 2 || event.metaKey) { 
       return true; 
      } 

      // Ajaxify this link 
      History.pushState(null, title, url); 
      event.preventDefault(); 
      return false; 
     }); 

     // Chain 
     return $this; 
    }; 

    // Ajaxify our Internal Links 
    $body.ajaxify(); 

    // Hook into State Changes 
    $window.bind('statechange', function() { 
     // Prepare Variables 
     var 
     State = History.getState(), 
      url = State.url, 
      relativeUrl = url.replace(rootUrl, ''); 


     // Start Fade Out 
     // Animating to opacity to 0 still keeps the element's height intact 
     // Which prevents that annoying pop bang issue when loading in new content 
     $content.animate({ 
      opacity: 0 
     }, 800); 

     // Ajax Request the Traditional Page 
     callAjax("GetContent", { 
      URL: url /*typeOfHeader: contentType, argsdata: argdata*/ 
     }, 
     false, 

     function() { 
      var ops = $('#ops'); 
      if (ops != null) ops.html(''); 
      ShowProgress(''); 
      //var now = (new Date()).getTime();     //Caching 
      //if (headerCache.exist(url)) { 
      // tDiff = now - headerCacheTime; 
      // if (tDiff < 3000) { 
      //  setContentData(headerCache.get(url)); 
      //  return true; 
      // } 
      //} 
     }, 

     function (d) { 
      //headerCache.set(url, d, null); 
      //cacheName = url; 
      HideProgress(); 
      setContentData(d); 
     }, null); 

     // end ajax 

    }); // end onStateChange 
} 
(function (window, undefined) { 

    // Prepare our Variables 
    PrepareVariables(); 

    // Check to see if History.js is enabled for our Browser 
    if (!History.enabled) { 
     return false; 
    } 

    // Wait for Document 
    $(function() { 
     InitHistory(); 
    }); 
    // end onDomLoad 

})(window); // end closure 
function UpdateHistory() { 
    var title = (document.title.trim().length > 0 ? document.title : null); 
    var url = window.location.href.replace(/^.*\/\/[^\/]+/, ''); 
    var History = window.History; 
    History.replaceState(null, title, url); 
    $('a[data-isnav="0"').click(function() { 
     // Prepare 
     var 
     $this = $(this), 
      url = $this.attr('href'), 
      title = ($this.attr('title') || null); 

     // Continue as normal for cmd clicks etc 
     if (event.which == 2 || event.metaKey) { 
      return true; 
     } 

     // Ajaxify this link 
     History.pushState(null, title, url); 
     event.preventDefault(); 
     return false; 
    }); 
} 

function setContentData(d) { 
    var data = d.data; 

    // Fetch the scripts 
    //$scripts = $dataContent.find('.document-script'); 
    //if ($scripts.length) { 
    // $scripts.detach(); 
    //} 

    // Fetch the content 
    contentHtml = data; 
    if (!contentHtml) { 
     document.location.href = url; 
     return false; 
    } 

    // Update the menu 
    //$menuChildren = $menu.find(menuChildrenSelector); 
    //$menuChildren.filter(activeSelector).removeClass(activeClass); 
    //$menuChildren = $menuChildren.has('a[href^="' + relativeUrl + '"],a[href^="/' + relativeUrl + '"],a[href^="' + url + '"]'); 
    //if ($menuChildren.length === 1) { $menuChildren.addClass(activeClass); } 

    // Update the content 
    $content.stop(true, true); 
    $content.html(contentHtml).ajaxify().css('opacity', 100).show(); /* you could fade in here if you'd like */ 

    //Intialize other content 
    initContent(); 

    // Update the title 
    //document.title = $data.find('.document-title:first').text(); 
    //try { 
    // document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<', '&lt;').replace('>', '&gt;').replace(' & ', ' &amp; '); 
    //} 
    //catch (Exception) { } 

    // Add the scripts 
    //$scripts.each(function() { 
    // var $script = $(this), scriptText = $script.text(), scriptNode = document.createElement('script'); 
    // if ($script.attr('src')) { 
    //  if (!$script[0].async) { scriptNode.async = false; } 
    //  scriptNode.src = $script.attr('src'); 
    // } 
    // scriptNode.appendChild(document.createTextNode(scriptText)); 
    // contentNode.appendChild(scriptNode); 
    //}); 

    // Complete the change 
    if ($body.ScrollTo || false) { 
     $body.ScrollTo(scrollOptions); 
    } /* http://balupton.com/projects/jquery-scrollto */ 
    $window.trigger(completedEventName); 

    // Inform Google Analytics of the change 
    if (typeof window._gaq !== 'undefined') { 
     window._gaq.push(['_trackPageview', relativeUrl]); 
    } 

    // Inform ReInvigorate of a state change 
    if (typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined') { 
     reinvigorate.ajax_track(url); 
     //^we use the full url here as that is what reinvigorate supports 
    } 
} 

To działa bez zarzutu, a zawartość dodana na stronie za pomocą Ajax jest dodawany do poprzedniego stanu używając UpdateHistory() funkcję. Na niektórych stronach stan jest pomyślnie aktualizowany, ale na jednej stronie nie aktualizuje zawartości, gdy strona jest dostępna po raz drugi. Szukałem SO dla wszystkich podobnych pytań, ale nie mogłem znaleźć rozwiązania. Najpierw pomyślałem, że problem jest z Internet Explorerem, ale potem wypróbowałem go w Firefoksie, ale nie zadziałało. Proszę powiedz mi, jaki może być powód?

UPDATE

To działa dla adresów URL, takich jak:

http://localhost:13956/AppStore/App/2012/Install

Ale nie dla:

http://localhost:13956/AppStore

Answer 1

Wygląda na to, że pierwsza strona nie została zapisana. Spróbuj zadzwonić pod numer UpdateHistory() lub History.pushState(null, title, url) w InitHistory().