Puoi utilizzare la navigazione hash senza influire sulla cronologia?


100

Temo che possa essere impossibile ma esiste un modo per modificare il valore hash di un URL senza lasciare una voce nella cronologia del browser e senza ricaricare ? O fare l'equivalente?

Per quanto riguarda le specifiche, stavo sviluppando una navigazione hash di base sulla falsariga di:

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs work
    $("#tabs.js-tabs a").live("click", function() {
        var showMe = $(this).attr("href");
        $(showMe).show();
        setHash(showMe);
        return false;
    });
    //hash nav on ready .. if hash exists, execute
    if ( getHash ){
        useHash(getHash);
    }

Utilizzando jQuery, ovviamente. L'idea è che in questa specifica istanza 1) fare in modo che l'utente torni indietro a ogni modifica della scheda potrebbe effettivamente `` rompere il pulsante Indietro '' accumulando riferimenti inutili e 2) non mantenere la scheda su cui si trova attualmente se si preme l'aggiornamento è un fastidio.


Perché vuoi cambiare l'hash se non vuoi tenere traccia della cronologia? : |
Ionuț Staicu

10
Perché all'aggiornamento sarebbe meglio presentare all'utente la scheda su cui si trovava, ma poiché potrebbe scorrere avanti e indietro tra le schede, riempirebbe inutilmente la cronologia con voci, rendendo il pulsante Indietro effettivamente meno utile. Questo è solo un esempio, tuttavia, potrebbe essere per ogni volta che è necessario salvare uno stato temporaneo ma non si desidera fare affidamento sui cookie o riempire il file temporaneo dell'utente con essi. Quando aggiorni, il contenuto js è come l'avevi lasciato: non hai lasciato la pagina e non è un punto di salto o una pagina psuedo, quindi la voce della cronologia può interferire solo con la navigazione standard.

Risposte:


95

location.replace("#hash_value_here");ha funzionato bene per me finché non ho scoperto che non funziona su IOS Chrome. In tal caso, utilizzare:

history.replaceState(undefined, undefined, "#hash_value")

history.replaceState () funziona esattamente come history.pushState () tranne per il fatto che replaceState () modifica la voce della cronologia corrente invece di crearne una nuova.

Ricordati di mantenere #o l'ultima parte dell'URL verrà modificata.


3
Completamente la strada da percorrere per i browser moderni; essere consapevoli della gestione della cronologia delle sessioni di supporto parziale .
Matt

Sono confuso su come usarlo. Devo comunque usare window.location.hash = 'my-hash';seguito da history.replaceState(undefined, undefined, "#my-hash")?
Bram Vanroy

2
@BramVanroy No, è sufficiente utilizzare quest'ultimo.
Lucia

2
A meno che non utilizzi: selettori di destinazione ... le funzioni di cronologia sono inutili, poiché quella parte delle specifiche (interazione CSS con operazioni di cronologia) sembra non essere definita attualmente e lo stile non viene ricalcolato sulla sostituzione della cronologia dalla maggior parte / tutti i browser.
trasforma il

@Luxiyalu, in cosa history.replaceStatedifferisce da location.replace?
Pacerier

99
location.replace("#hash_value_here"); 

Quanto sopra sembra fare quello che stai cercando.


4
Questo è. E se hai segmenti uri, location.replace (window.location + "#hash") li conserverà.
voltafieno

7
Seguendo questo metodo, molto più pulito, vorrei che fosse contrassegnato come la risposta corretta.
joeellis

14
window.location.replace(('' + window.location).split('#')[0] + '#' + hash);per aggiornare solo l'hash
johnstorm

1
Lo sto testando in Chrome 30 sotto Windows 8, se vado nella Cronologia di Chrome e seleziono "Altro da questo sito" sotto il mio URL di prova, posso vedere tutti gli hash aggiunti con questo metodo.
Alex Vang

1
Fai attenzione che location.replace ('# hash_value_here') cambia solo il frammento hash e non il percorso, quindi non attiva il caricamento di una pagina .... Tranne quando il documento contiene un tag di base: <base href ="http://example.com/" /> se contiene un tag di base , quindi quando usi il metodo di sostituzione con solo un'interlinea "#hash_value_here", in realtà sarà come se dicessi `location.replace (' example.com/#hash_value_here' ). Sembra ovvio quando lo leggi qui, ma è un trucco quando sei su una pagina con un frammento di percorso e non ti rendi conto che la base è impostata.
Tyler Kasten

6

Modifica: sono passati un paio d'anni ei browser si sono evoluti.

La risposta di @ Luxiyalu è la strada da percorrere

- Vecchia risposta -

Anch'io penso che sia impossibile (in questo momento). Ma perché è necessario modificare il valore hash se non lo si intende utilizzare?

Credo che il motivo principale per cui usiamo il valore hash come programmatori sia per consentire all'utente di aggiungere ai preferiti le nostre pagine o per salvare uno stato nella cronologia del browser. Se non vuoi fare nulla di tutto ciò, salva lo stato in una variabile e lavora da lì.

Penso che la ragione per usare un hash sia lavorare con un valore che è fuori dal nostro controllo. Se non ne hai bisogno, probabilmente significa che hai tutto sotto il tuo controllo, quindi memorizza lo stato in una variabile e lavoraci. (Mi piace ripetermi)

Spero che questo ti aiuti. Forse c'è una soluzione più semplice al tuo problema.

AGGIORNAMENTO: Che ne dici di questo:

  1. Imposta un primo hash e assicurati che venga salvato nella cronologia del browser.
  2. Quando viene selezionata una nuova scheda, fallo window.history.back(1), ciò farà tornare indietro la cronologia dal tuo primo hash di inizializzazione.
  3. Ora imposti il ​​nuovo hash, quindi la tabulazione farà solo una voce nella cronologia.

Probabilmente dovrai usare alcuni flag, per sapere se la voce corrente può essere "cancellata" tornando indietro, o se salti semplicemente il primo passaggio. E per assicurarti che il tuo metodo di caricamento per "hash" non venga eseguito, quando imposti il ​​file history.back.


È molto probabile che mi manchi qualcosa di base (l'esaurimento è una bella scusa, lo seguirò) ma stai dicendo che posso impostare una variabile che manterrà il suo valore modificato al momento della ricarica? Inoltre con un biscotto? (I biscotti sembrano eccessivi, in qualche modo ..) Forse era quello che non era chiaro. Userò il valore hash, in particolare durante la ricarica. Grazie per aver risposto!

Per chiarire la mia precisazione: se l'utente preme ricarica. Ecco a cosa serve l'hashish. Sto ancora cercando di evitare il ricaricamento nel loro normale utilizzo (modifica / clic sulle schede).

Ok, quindi utilizzerai alcuni valori per le informazioni dopo il ricaricamento. Ebbene, sfortunatamente, il valore hash verrà scelto dalla cronologia di alcuni browser. Mi dispiace dirlo, ma dalla mia esperienza, i biscotti sono la soluzione migliore. Se vuoi qualcosa che la cronologia del browser non rileva, ma che conservi dopo il ricaricamento, sfortunatamente, i cookie. Se l'utente stava facendo clic su un collegamento, è possibile impostare il collegamento in modo che sia una query ( ?mystate=greatness), anche se non è necessario che sia ajax, è possibile salvare le informazioni da leggere per JavaScript durante l'inizializzazione della richiesta.
guzart

Sì, l'hash serve per salvare le informazioni dell'utente dopo aver
premuto il pulsante di

Sì, penso di aver ragione. Ah bene. (Mi piacerebbe essere

-1

Puoi sempre creare un listener di eventi per catturare gli eventi di clic sul collegamento ipertestuale e nella funzione di callback inserire e.preventDefault (), che dovrebbe impedire al browser di inserirlo nella cronologia.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.