Utilizzo di AJAX per modificare il contenuto div: come visualizzare la navigazione come hash/anchor

Question

Voglio creare una pagina che aggiorni il contenuto all'interno di un div async insieme a fornire all'utente un ancoraggio per consentire l'accesso diretto al contenuto all'interno del div. (Ad es www.website.co.uk/#page1)

sono riuscito a fare in modo che il contenuto può essere aggiornato per 1 pagina, tuttavia, se aggiungo più pagine smette di funzionare

Inoltre - se dovessi navigare verso l'URL website.co.uk/#page1 non visualizzerà # page1.

Qualcuno può aiutare?

Questo è il mio codice corrente:

HTML:

<h5> <a href="#page1">Test</a></h5> 
<h5> <a href="#page2">Test2</a></h5> 

JS:

<script type="text/javascript"> 
    var routes = { 
     '#page1' : '{{site.url}}/page1' 
     '#page2' : '{{site.url}}/page2' 
    }; 
    var routeHandler = function(event) { 
     var hash = window.location.hash, 
      xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       document.getElementById("div1").innerHTML = xhttp.responseText; 
      } 
     }; 
     xhttp.open("GET", routes[hash], true); 
     xhttp.send();  
    }; 
    window.addEventListener('hashchange', routeHandler); 
    window.addEventListener('load', function() { 
     var hash = window.location.hash; 
     if (routes.hasOwnProperty(hash)) routehandler(); 
    }); 
</script> 

Answer 1

Lei ha fatto alcuni piccoli errori js. ecco che si fissa codice

html:

<h5> <a href="#page1">Test</a></h5> 
<h5> <a href="#page2">Test2</a></h5> 
<div id="div1"></div> 

javascript:

//change these routs 
    var routes = { 
    '#page1': '/page1.html', 
    '#page2': '/page2.html' 
    }; 

    var routeHandler = function() { 

    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("div1").innerHTML = xhttp.responseText; 
     } 
    }; 

    xhttp.open("GET", routes[window.location.hash], true); 
    xhttp.send(); 

    }; 

    window.addEventListener('hashchange', routeHandler); 
    window.addEventListener('load', function() { 
    var hash = window.location.hash; 
    if (routes.hasOwnProperty(window.location.hash)) routeHandler(); 
    }); 

Answer 2

poiché avete etichettato la questione con jQuery, iassume avete jQuery disponibili , in questo caso puoi fare qualcosa del tipo:

$(window).on('hashchange', refreshContent); 

function refreshContent() { 
    $.get(getBaseUrl() + location.hash, function(data) { 
     $('#div1').html(data); 
    }); 
} 

Ma si prega di essere consapevoli che ci sono un sacco di soluzioni più sofisticate là fuori

Answer 3

Di solito si utilizza un oggetto simile router per questo. Invece del collegamento ipertestuale che stai utilizzando, imposta l'href sull'hash della pagina effettiva <a href="#page1">Button Title</a>. Quindi crea un listener di eventi per l'hashchange sull'oggetto della finestra in cui recupererai il contenuto.

Infine, aggiungere un elenco di pagine Web a cui si desidera navigare, in modo da poter tradurre "# pagina1" nell'url reale.

Il risultato è che è possibile utilizzare hrefs semplici nei collegamenti ipertestuali e la pagina corrente verrà visualizzata nella barra degli indirizzi in alto.

ps: aggiungi un controllo nel listener hashchange per le route che non sono elencate, quindi puoi comunque collegarti anche alle pagine esterne.

pps: se si desidera poter accedere direttamente a una pagina, è necessario aggiungere un controllo manuale dell'hash al caricamento del documento.

// html mockup 
<a href="#page1">Button Title</a> 
// js mockup 
var routes = { 
    '#page1' : '{{site.url}}/webpage.html' 
}; 

window.addEventListener('hashchange', function(event) { 
    var hash = window.location.hash, // gives you '#page1' 
     xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      document.getElementById("div1").innerHTML = xhttp.responseText; 
     } 
    }; 
    xhttp.open("GET", routes[hash], true); 
    xhttp.send();  
}); 

aggiornato con un ascoltatore carico:

// html mockup 
<a href="#page1">Button Title</a> 
// js mockup 
var routes = { 
    '#page1' : '{{site.url}}/webpage.html' 
}; 
var routeHandler = function(event) { 
    var hash = window.location.hash, // gives you '#page1' 
     xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      document.getElementById("div1").innerHTML = xhttp.responseText; 
     } 
    }; 
    xhttp.open("GET", routes[hash], true); 
    xhttp.send();  
}; 
window.addEventListener('hashchange', routeHandler); 
window.addEventListener('load', function() { 
    var hash = window.location.hash; 
    if (routes.hasOwnProperty(hash)) routehandler(); 
}); 

Answer 4

ho dato direttamente sul onclick suo funzionamento. Potrebbe aiutarti.

<h5> <a href="#page1" onclick="test('#page1')">Test</a></h5> 
<h5> <a href="#page2" onclick="test('#page2')">Test2</a></h5> 
<div id="div1"></div> 

<script type="text/javascript"> 

    var routes = { 
     '#page1' : 'page1.html', 
     '#page2' : 'page2.html' 
    }; 
    function test(page) { 

     xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       document.getElementById("div1").innerHTML = xhttp.responseText; 
      } 
     }; 
     xhttp.open("GET", routes[page], true); 
     xhttp.send();  
    } 

</script> 

ho usato .html per le pagine per il controllo. Tu usi il tuo.