Reindirizza a una pagina Web in JavaScript

1. JavaScript reindirizza una pagina web con location.href()
2. JavaScript reindirizza una pagina web con location.replace()
3. 3. JavaScript reindirizza una pagina web con location.assign()
4. 4. JavaScript reindirizza una pagina web creando dinamicamente un elemento di ancoraggio
5. Conclusione

Esistono vari modi in JavaScript per reindirizzare l’utente. Dipende dai requisiti aziendali e dal tipo di comportamento di reindirizzamento che il sito dovrebbe avere. Puoi reindirizzare i tuoi utenti nei seguenti modi:

1. location.href()
2. location.replace()
3. location.assign()
4. Crea dinamicamente l’elemento di ancoraggio

JavaScript reindirizza una pagina web con location.href()

Usa l’interfaccia location insieme agli oggetti Document e Window per il reindirizzamento. Tipicamente window.location.href restituisce l’URL della pagina corrente. Ad esempio, se esegui il codice seguente, vedrai l’URL della pagina:

console.log(window.location.href)

Produzione:

"https://www.delftstack.com/"

Il trucco è sostituire questo URL assegnando un URL diverso a window.location.href. Farà caricare al browser la pagina specificata dall’URL, quindi reindirizzandola. In termini di stack della cronologia del sito, questo metodo modifica l’URL di riferimento corrente. Il codice seguente porterà alla pagina delle istruzioni di DelfStack.

window.location.href = 'https://www.delftstack.com/howto/';

Osservazioni:

1. Una volta caricato il nuovo URL, la pagina Web precedente è accessibile tramite il pulsante Indietro del browser.
2. È il metodo più comunemente utilizzato per il reindirizzamento

JavaScript reindirizza una pagina web con location.replace()

Se desideri passare in modo permanente a una pagina web, utilizza location.replace. La differenza è che location.replace sostituirà l’URL corrente con un nuovo URL. Pertanto, l’utente non sarà in grado di tornare all’URL precedente. In termini di stack della cronologia del browser, il metodo visualizza l’URL dell’ultima pagina Web e inserisce l’URL nel valore.

window.location.replace('https://www.delftstack.com');

L’esecuzione di questo caricherà il sito https://www.delftstack.com.

Osservazioni:

1. Si consiglia di utilizzare questo metodo solo quando necessario.
2. Non è possibile tornare al collegamento precedente utilizzando questo metodo. Quindi, potrebbe non essere una buona esperienza utente.

3. JavaScript reindirizza una pagina web con location.assign()

Come il location.replace(), il metodo assign() ha la differenza che il collegamento corrente rimane nella cronologia del browser. In questo modo l’utente potrà tornare alla pagina precedente utilizzando il pulsante Indietro del browser. Questo metodo accetta anche l’URL di destinazione come parametro.

window.location.assign('https://www.delftstack.com');

4. JavaScript reindirizza una pagina web creando dinamicamente un elemento di ancoraggio

Nei browser meno recenti, in particolare Internet Explorer, con versione 8 o inferiore, l’interfaccia di localizzazione non è supportata. Quindi, creiamo un tag di ancoraggio (<a>) dinamicamente e impostiamo l’attributo href con l’URL di destinazione. Come accennato in precedenza, il tag di ancoraggio è un elemento passivo che richiede l’interazione dell’utente per richiamarlo. Quindi, viene attivato un evento clic nel codice per far funzionare il reindirizzamento.

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

Qui, otteniamo il reindirizzamento tramite:

1. Creazione di un elemento tag di ancoraggio document.createElement('a');
2. Impostazione della proprietà href con il nuovo URL newURL.href = targetURL
3. Collegamento del tag creato dinamicamente al nodo DOM con document.body.appendChild(newURL)
4. Infine, richiamandolo emulando un utente, fai clic su newURL.click()

Il browser caricherà il nuovo URL.

Conclusione

A seconda dei requisiti aziendali, sarà utile utilizzare il metodo di meta refresh per reindirizzare un utente non appena arriva sulla pagina web del sito in manutenzione. L’utilizzo dell’anchor tag è abbastanza comune se la navigazione è intesa in base al clic dell’utente. Possiamo utilizzare i metodi dell’interfaccia Location in JavaScript, window.location.href e window.location.assign(), per inviare programmaticamente un utente a un nuovo URL.