Il titolo di history.pushState non è supportato, qual è una buona alternativa?

Question

Il secondo parametro di History.pushState e History.replaceState può essere utilizzato per impostare il "titolo" della voce di cronologia.

Questo significa che quando l'utente fa clic attraverso la pagina 1 a pagina 8, questo è quello che dovrebbe vedere nel suo bar storia:

e si sta lavorando su Safari e Opera.

Ma su Chrome e Firefox, questo è ciò che l'utente vede:

Cercando di cambiare document.title non funziona come cambia tutte le voci all'interno del titolo della storia:

Qual è la migliore soluzione a questo problema?

siamo costretti a utilizzare solo uno titolo storia per tutte le pagine implementati utilizzando pushState e replaceState?

Answer 1

History.js supporta con garbo le API di cronologia/stato HTML5 (pushState, replaceState, onPopState) in tutti i browser.

Date un'occhiata alle demo here

esempio di utilizzo:

History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1" 
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2" 
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3" 
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4" 
History.back(); // logs {state:3}, "State 3", "?state=3" 
History.back(); // logs {state:1}, "State 1", "?state=1" 
History.back(); // logs {}, "Home Page", "?" 
History.go(2); // logs {state:3}, "State 3", "?state=3" 

Answer 2

Ho avuto lo stesso problema e sembra vi sbagliate.

Se History.js lo supporta, puoi farlo anche tu. Guardando il codice sorgente sembra storia JS lo fa in questo modo:

https://github.com/browserstate/history.js/blob/master/scripts/uncompressed/history.js#L1293

try { 
    document.getElementsByTagName('title')[0].innerHTML = title.replace('<','&lt;').replace('>','&gt;').replace(' & ',' &amp; '); 
} 
catch (Exception) { } 
document.title = title; 

ho testato e funziona bene per me con Chrome: non "riscrivere" l'intero titoli di storia. Tuttavia sembra che andare avanti o indietro possa causare un ricaricamento della pagina che può eventualmente reinizializzare quel titolo.

Answer 3

Una soluzione per risolvere questo problema è quello di utilizzare il seguente codice invece:

window.history.pushState({state: 1}, null, "https://example.com"); 
document.title = "Your title"; 

Quindi, basta sostituire la voce "titolo" nell'oggetto la storia con null, e cambiare il titolo del documento subito dopo .

Al momento, questo funziona con Chrome, Opera e Firefox per me. Non ho testato nessun altro browser, ma sono quasi sicuro che risolverà il problema su quasi tutti i browser.