JQuery History.js Plugin ersetzt nicht den Status einer Seite in beiden HTML4 und HTML5-Browsern

Question

Ich verwende JQuery History.js plugin, um die History-API in HTML5-Browsern zu aktivieren und HTML4-Browser zu emulieren. Ich benutze Ajaxify script, um dieses Plugin zu implementieren. Ich änderte dieses Skript ein wenig wie gezeigt:

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 
    } 
} 

Es funktioniert gut und der Inhalt hinzugefügt auf Seite Ajax zum vorherigen Zustand hinzugefügt werden UpdateHistory() Funktion. Auf einigen Seiten wird der Status erfolgreich aktualisiert, aber auf einer Seite wird der Inhalt nicht aktualisiert, wenn auf die Seite zum zweiten Mal zugegriffen wird. Ich suchte SO nach all den ähnlichen Fragen, konnte aber keine Lösung finden. Zuerst dachte ich, dass das Problem mit Internet Explorer ist, aber dann habe ich es in Firefox versucht, aber es hat nicht funktioniert. Bitte sag mir, was kann der Grund sein?

UPDATE

Es funktioniert für URLs wie:

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

Aber nicht für:

http://localhost:13956/AppStore

Answer 1

Es sieht so aus, als wäre die erste Seite nicht gespeichert. Versuchen Sie UpdateHistory() oder History.pushState(null, title, url) innerhalb InitHistory() anzurufen.