History API e History.js Back Button issue

Question

Sto caricando la pagina tramite Ajax. Quando l'utente fa clic su un collegamento, la pagina viene caricata correttamente AJAX, ma quando l'utente fa clic sul pulsante Indietro, le pagine ricaricano la pagina iniziale. quindi lo scenario è questo.

1. Caricare la pagina iniziale (index.php)
2. utente fa clic sul collegamento
3. la pagina viene caricata con successo
4. fa clic sul pulsante Indietro
5. La pagina iniziale è di essere mostrate due volte.

Ecco il markup.

$(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) 
      }); 
     }); 

questo è il markup

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

Se ancora non si ottiene la mia domanda o lo scenario

Ecco lo scenario completo. iniziale Pagina

quando l'utente clicca sul link la pagina viene caricata selezionati con successo

quando clicco sul pulsante Indietro nella pagina iniziale è ora raddoppiata

Come te può vedere il link "Pagina1" è raddoppiato. È un problema del browser? o il mio understading della storia è qualcosa che manca o manca? Qual è la possibile soluzione per questo?

Answer 1

Se si costruisce il sito per utilizzare un modello simile sia per le pagine principali che per le pagine di contenuto, è possibile utilizzare la sintassi del selettore contenitore per jquery.carico:

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

che nel tuo caso si tradurrebbe in:

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

Ciò avrà il vantaggio che le pagine url contenuti sono accessibili direttamente e senza aggiungere molto trucchi.

Answer 2

Questo potrebbe accadere perché quando si naviga all'indietro si attiva l'evento 'statechange', e nella richiamata si sta caricando un contenuto di quella pagina con l'url dato: $('#content').load(State.url);, quindi quando, ad esempio, si sta navigando all'indietro verso il / URL verrà caricato il contenuto di quella pagina di indice e posizionarlo all'interno del contenitore, in modo che il mark up sarà effettivamente simile a questa:

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

ci sono diversi modi per risolvere questo problema - il più semplice è solo per rilevare se l'utente naviga alla pagina iniziale e non carica questa pagina attraverso ajax, ma inserisce il contenuto predefinito. È inoltre possibile rilevare sul lato server se la richiesta è stata fatta tramite ajax e poi restituire solo dei contenuti necessari per aggiornare la pagina (che nel tuo caso può essere <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) 
      }); 
     }); 

Prova questo js.

Answer 4

Stavo avendo un problema simile. Ho semplicemente aggiunto $ content.html ("") per cancellare il contenitore prima di caricarlo tramite ajax. Vedere la sezione frammento relevent inizia con // aggiunto da Joel per fissare il caricamento di contenuti due volte sul pulsante Indietro

$.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

I m utilizzando questo codice, spero che questo vi aiuterà.

//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()); 
    });