Il miglior esempio di ciò che sto cercando di fare è il sistema di navigazione di YouTube. Se fai clic su un collegamento a un video, viene visualizzata una barra rossa nella parte superiore della pagina che indica la parte della pagina richiesta caricata. Al termine del caricamento della pagina richiesta, sostituisce istantaneamente il contenuto della pagina precedente e il video inizia a caricarsi. Molte cose stanno accadendo per renderlo il più semplice possibile.Come caricare le pagine con JavaScript anziché il reindirizzamento?
- L'URL viene modificato per corrispondere alla nuova pagina.
- Nessun reindirizzamento (Questo è difficile da spiegare).
- La nuova pagina viene aggiunta alla cronologia.
- La navigazione Indietro e Avanti funziona perfettamente.
ho modificato l'URL con:
window.history.pushState("object or string", "Title", "/new-url");
ho cercato di caricare la pagina richiesta con:
$.("html").load("newPage.php", function(){});
Questo dovrebbe sostituire il codice dell'intera pagina precedente con il nuovo codice di pagine. Diversi problemi con questo:
avanti e indietro di navigazione funziona con l'URL, ma un gestore di eventi deve rilevare questo e caricare la pagina corretta. Ho usato questo:
$(window).on('popstate', function() { $('html').load("../"+window.location.pathname, {page:"account"}); });- Utilizzando
$.load()non può (non deve) caricare ogni nuovo script Tag Tag di script perchéSynchronous XMLHttpRequest on the main thread is deprecated
Quello che mi piacerebbe essere in grado di fare:
- Caricare senza problemi una pagina senza un reindirizzamento utilizzando JQuery e AJAX
- Avere che questa nuova pagina possa avere nuovi script e tag PHP (PHP potrebbe essere impossibile, e potrei dover usare AJAX per replicare questo).
Fonti:
Updating address bar with new URL without hash or reloading the page
Load HTML page dynamically into div with jQuery
JS or Jquery browser back button click detector
Synchronous XMLHttpRequest on the main thread is deprecated
Benvenuti in SO: cosa avete provato? Siamo felici di aiutarti ma non possiamo scrivere il codice per te –
Ho mostrato quello che ho provato nelle sezioni codificate, ma i metodi usati sono deprecati e piuttosto sciatti. Sto cercando una libreria di generi che possa fare tutto il duro lavoro per me. Puoi vedere le mie fonti e perché non funzioneranno in fondo. – Damen
Questo potrebbe essere off-topic per te, dato che sei specifico nei tuoi tag, ma un framework MVC front-end come AngularJS non risolve molti dei tuoi problemi? (potrebbe dover abbandonare PHP per le viste). – Drumbeg