歷史API和History.js後退按鈕問題

Question

我正在通過Ajax加載頁面。當用戶單擊鏈接時，頁面正在成功加載AJAX，但是當用戶單擊後退按鈕時，頁面將重新加載初始頁面。所以情景是這樣的。

1. 負載初始頁面（的index.php）鏈路
2. 頁面加載成功
3. 點擊返回按鈕
4. 初始頁現在被顯示兩次上
5. 用戶點擊。

這是標記。

$(function() { 
      // Prepare 
      var History = window.History; // Note: We are using a capital H instead of a lower h 
      if (!History.enabled) { 
       // History.js is disabled for this browser. 
       // This is because we can optionally choose to support HTML4 browsers or not. 
       return false; 
      } 

      // Bind to StateChange Event 
      History.Adapter.bind(window, 'statechange', function() { // Note: We are using statechange instead of popstate 
       var State = History.getState(); 
       $('#content').load(State.url); 
      }); 

      $('a').click(function(evt) { 
       evt.preventDefault(); 
       History.pushState(null, $(this).text(), $(this).attr('href')); 
       alert(State.url) 
      }); 
     }); 

這是標記

<div id="wrap"> 
      <a href="page1.html">Page 1</a> 
     </div> 

     <div id="content"> 
      <p>Content within this box is replaced with content from 
       supporting pages using javascript and AJAX.</p> 
     </div> 

如果你還沒有得到我的問題或情況

下面是完整的方案。 初始頁面

當用戶點擊成功選定頁面加載的鏈接

當我點擊後退按鈕的初始頁面現在增加一倍

就像你可以看到「Page1」鏈接翻了一番。這是瀏覽器問題嗎？或者我對歷史api的描述是缺乏或缺失的？這有什麼可能的解決方案？

Answer 1

如果您構建您的網站使用類似的模板的主要頁面以及內容頁面，您可以使用jquery的容器選擇器語法。負載：

// See: http://api.jquery.com/load/ 
$('#result').load('ajax/test.html #container'); 

而你的情況會導致：

$('#content').load(State.url + ' #content'); 

這將有額外的好處，內容URL頁面直接訪問，以及不會增加太多的技巧。

Answer 2

這可能會發生，因爲當您向後導航時，它會觸發'statechange'事件，並且在您的回調中，您正在使用給定的url加載該頁面的內容：$('#content').load(State.url);，因此，當您向後導航到/網址將會加載該索引頁的內容，並把它放在你的容器內，所以你的標記，實際上是這樣的：

<div id="wrap"> 
     <a href="page1.html">Page 1</a> 
</div> 

<div id="content"> 
    <div id="wrap"> 
     <a href="page1.html">Page 1</a> 
    </div> 

    <div id="content"> 
     <p>Content within this box is replaced with content from 
      supporting pages using javascript and AJAX.</p> 
    </div> 
</div> 

有幾種方法來解決這個問題 - 最簡單的就是檢測如果用戶導航到初始頁面並且不通過ajax加載此頁面，但插入預定義的內容。 您還可以檢測在服務器端，如果請求是通過Ajax進行，然後返回只更新頁面（在你的情況可能是<p>Content within this box is replaced with content from supporting pages using javascript and AJAX.</p>）

Answer 3

$(function() { 
      // Prepare 
      var History = window.History; // Note: We are using a capital H instead of a lower h 
      if (!History.enabled) { 
       // History.js is disabled for this browser. 
       // This is because we can optionally choose to support HTML4 browsers or not. 
       return false; 
      } 

      // Bind to StateChange Event 
      History.Adapter.bind(window, 'statechange', function() { // Note: We are using statechange instead of popstate 
       var State = History.getState(); 
       if(State.url==document.URL){ 
        $.ajax({ 
          url: State.url, 
          success: function(data) { 
             var dom_loaded=$(data); 
             $('#content').html($('#content',dom_loaded).html()); 
          } 
         }); 


       }else{ 
        $('#content').load(State.url); 
       } 
      }); 

      $('a').click(function(evt) { 
       evt.preventDefault(); 
       History.pushState(null, $(this).text(), $(this).attr('href')); 
       alert(State.url) 
      }); 
     }); 

試試這個js所需要的內容。

Answer 4

我有類似的問題。我簡單地添加了$ content.html（「」），以在通過ajax加載之前清除容器。見片斷培訓相關部分以 //喬爾加開始在後退按鈕兩次修正內容加載

$.ajax({ 
      url: url, 
      success: function (data, textStatus, jqXHR) { 
       // Prepare 
       var 
        $data = $(documentHtml(data)), 
        $dataBody = $data.find('.document-body:first'), 
        $dataContent = $dataBody.find(contentSelector).filter(':first'), 
        $menuChildren, contentHtml, $scripts; 

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

       // Fetch the content 
       contentHtml = $dataContent.html() || $data.html(); 
       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); 
       //added by Joel to fix content loading twice on back button 
       $content.html(""); 
       //end added by joel 
       $content.html(contentHtml).ajaxify().css('opacity', 100).show(); /* you could fade in here if you'd like */ 

       // 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'); 
        scriptNode.appendChild(document.createTextNode(scriptText)); 
        contentNode.appendChild(scriptNode); 
       }); 

       // Complete the change 
       if ($body.ScrollTo || false) { $body.ScrollTo(scrollOptions); } /* http://balupton.com/projects/jquery-scrollto */ 
       $body.removeClass('loading'); 
       $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 
       } 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       document.location.href = url; 
       return false; 
      } 
     }); // end ajax 

Answer 5

我米使用此代碼，希望這會幫助你。

//get the contents of #container and add it to the target action page's #container 
    $('#container').load(url+' #container',function(){ 
     $('#container').html($(this).find('#container').html()); 
    });