JQuery History.js eklentisi, bir sayfanın durumunu hem HTML4 hem de HTML5 tarayıcılarında değiştirmiyor

Question

HTML5 tarayıcılarında Geçmiş API'yi etkinleştirmek ve HTML4 tarayıcılarında taklit etmek için JQuery History.js plugin kullanıyorum. Bu eklentiyi uygulamak için Ajaxify script kullanıyorum. Biraz gösterildiği gibi bu senaryoyu değiştirdi:

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

O iyi çalışıyor ve içerik UpdateHistory() işlevini kullanarak önceki durumuna eklenir Ajax kullanarak sayfadaki ekledi. Bazı sayfalarda durum başarıyla güncellenir, ancak bir sayfada ikinci kez sayfaya erişildiğinde içerik güncellenmez. Benzer sorular için SO aradım ama herhangi bir çözüm alamadım. İlk önce sorunun Internet Explorer ile olduğunu düşündüm ancak Firefox üzerinde denedim ama işe yaramadı. Lütfen nedenini anlatabilir misin?

GÜNCELLEME Sanki URL'ler için çalışıyor

: Ama

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

değil:

http://localhost:13956/AppStore

Answer 1

İlk sayfa kaydedilmemiş gibi görünüyor. InitHistory() içinde UpdateHistory() veya History.pushState(null, title, url)'u aramayı deneyin.