2015-07-23 9 views
10

Я использую JQuery History.js plugin, чтобы включить API истории в браузерах HTML5 и эмулировать в браузерах HTML4. Я использую Ajaxify script для реализации этого плагина. Я изменил этот сценарий немного, как показано ниже:Плагин JQuery History.js не заменяет состояние одной страницы в браузерах HTML4 и HTML5

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

Это работает отлично и содержание добавил на странице с помощью Ajax добавляется к предыдущему состоянию с помощью UpdateHistory() функции. На некоторых страницах состояние обновляется успешно, но на одной странице он не обновляет контент, когда страница обращается во второй раз. Я искал SO для всех подобных вопросов, но не смог получить какое-либо решение. Сначала я думал, что проблема связана с Internet Explorer, но затем я попробовал ее в Firefox, но это не сработало. Скажите, пожалуйста, какая причина?

UPDATE

Это работает для URL-адресов, как:

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

Но не для:

http://localhost:13956/AppStore

+0

Не могли бы вы объяснить, почему -1? –

+0

Я не тот, кто отказался от этого вопроса, но я понимаю, почему они это сделали. Ваш вопрос слишком много напоминает «вот мой код, он не работает, пожалуйста, исправьте его для меня» и немного слишком мало, как «вот моя проблема, я пробовал эти вещи, но они не работали для этих причины, и я нашел эту информацию об этом, но я все еще застрял, пожалуйста, помогите мне снова отправиться в путь ». – Julian

+0

Нет, это не потому, что я упомянул, что я сделал, и не просто вставил код, а спросил, не работает ли он. вы downvote, если вопрос не показывает никаких исследований или чего-то еще не делал раньше. Я пробовал все, что мне было известно, и много исследовал в Интернете об этом. Но все еще не в состоянии выяснить, где проблема. Таким образом, этот вопрос может не соответствовать требованиям, но его, безусловно, не имеет права на понижение по моему мнению. Я надеюсь, что сайт QnA не является сайтом статьи, на котором мы публикуем исследовательские работы. ;-) –

ответ

1

Это выглядит как первая страница не сохраняется. Попробуйте позвонить UpdateHistory() или History.pushState(null, title, url) внутри InitHistory().

+0

На самом деле он сохраняет первую страницу, но когда первая страница обновляется с помощью ajax, это не сохраняет ее. Я использую 'UpdateHistory()' после каждого вызова ajax. –