javascript redirect - Come reindirizzare a un'altra pagina Web?




15 Answers

Uno non semplicemente reindirizza utilizzando jQuery

jQuery non è necessario e window.location.replace(...) simulerà al meglio un reindirizzamento HTTP.

window.location.replace(...) è meglio dell'uso di window.location.href , perché replace() non mantiene la pagina di origine nella cronologia della sessione, il che significa che l'utente non si bloccherà in un back-end senza fine pulsante fiasco.

Se vuoi simulare qualcuno cliccando su un link, usa location.href

Se si desidera simulare un reindirizzamento HTTP, utilizzare location.replace

Per esempio:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
relative url

Come posso reindirizzare l'utente da una pagina all'altra utilizzando jQuery o puro JavaScript?




Standard JavaScript "vanilla" per reindirizzare una pagina:

window.location.href = 'newPage.html';

Se sei qui perché stai perdendo HTTP_REFERER durante il reindirizzamento, continua a leggere:

La seguente sezione è per coloro che utilizzano HTTP_REFERER come una delle molte misure sicure (anche se non è una misura di protezione). Se utilizzi Internet Explorer 8 o versioni precedenti, queste variabili si perdono quando si utilizza qualsiasi forma di reindirizzamento delle pagine JavaScript (location.href, ecc.).

Di seguito implementeremo un'alternativa per IE8 e inferiore in modo da non perdere HTTP_REFERER. Altrimenti puoi quasi sempre usare window.location.href .

Provare contro HTTP_REFERER (incollare URL, sessioni, ecc.) Può essere utile per dire se una richiesta è legittima. ( Nota: ci sono anche modi per aggirare / falsificare questi referenti, come notato dal link di droop nei commenti)

Semplice soluzione di test cross-browser (da fallback a window.location.href per Internet Explorer 9+ e tutti gli altri browser)

Uso: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}



Questo funziona per ogni browser:

window.location.href = 'your_url';



Penso anche che location.replace(URL) sia il modo migliore, ma se vuoi notificare ai motori di ricerca il tuo reindirizzamento (non analizzano il codice JavaScript per vedere il reindirizzamento) dovresti aggiungere la meta rel="canonical" tag al tuo sito web.

Aggiungere una sezione noscript con un meta tag di aggiornamento HTML al suo interno è anche una buona soluzione. Ti suggerisco di utilizzare questo strumento di reindirizzamento JavaScript per creare reindirizzamenti. Ha anche il supporto di Internet Explorer per passare il referrer HTTP.

Il codice di esempio senza ritardi è simile al seguente:

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->



JavaScript fornisce molti metodi per recuperare e modificare l'URL corrente che viene visualizzato nella barra degli indirizzi del browser. Tutti questi metodi utilizzano l'oggetto Location, che è una proprietà dell'oggetto Window. È possibile creare un nuovo oggetto Location con l'URL corrente come segue.

var currentLocation = window.location;

Struttura di base di un URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

  1. Protocollo: specifica il nome del protocollo da utilizzare per accedere alla risorsa su Internet. (HTTP (senza SSL) o HTTPS (con SSL))

  2. hostname - Il nome host specifica l'host che possiede la risorsa. Ad esempio, www..com. Un server fornisce servizi utilizzando il nome dell'host.

  3. port - Un numero di porta utilizzato per riconoscere un processo specifico a cui un messaggio Internet o di altro tipo deve essere inoltrato quando arriva a un server.

  4. percorso: il percorso fornisce informazioni sulla risorsa specifica all'interno dell'host a cui il client Web desidera accedere. Ad esempio, .com/index.html.

  5. query - Una stringa di query segue il componente del percorso e fornisce una stringa di informazioni che la risorsa può utilizzare per alcuni scopi (ad esempio, come parametri per una ricerca o come dati da elaborare).

  6. hash - La parte di ancoraggio di un URL, include il segno di cancelletto (#).

Con queste proprietà dell'oggetto Posizione è possibile accedere a tutti questi componenti URL

  1. hash: consente di impostare o restituire la parte di ancoraggio di un URL.
  2. host: imposta o restituisce il nome host e la porta di un URL.
  3. nome host: consente di impostare o restituire il nome host di un URL.
  4. href: consente di impostare o restituire l'intero URL.
  5. percorso: consente di impostare o restituire il nome del percorso di un URL.
  6. porta: consente di impostare o restituire il numero di porta utilizzato dal server per un URL.
  7. protocollo: consente di impostare o restituire il protocollo di un URL.
  8. ricerca: imposta o restituisce la parte relativa alla query di un URL

Ora Se vuoi cambiare una pagina o reindirizzare l'utente ad un'altra pagina puoi usare la proprietà href dell'oggetto Location come questa

È possibile utilizzare la proprietà href dell'oggetto Location.

window.location.href = "http://www..com";

L'oggetto posizione ha anche questi tre metodi

  1. assign () - Carica un nuovo documento.
  2. reload () - Ricarica il documento corrente.
  3. replace () - Sostituisce il documento corrente con uno nuovo

È possibile utilizzare assign () e sostituire i metodi anche per reindirizzare ad altre pagine come queste

location.assign("http://www..com");

location.replace("http://www..com");

Differenze tra assign () e replace () - La differenza tra replace () method e assign () method (), è che replace () rimuove l'URL del documento corrente dalla cronologia del documento, significa che non è possibile usare il pulsante "indietro" per tornare al documento originale. Quindi usa il metodo assign () se vuoi caricare un nuovo documento e vuoi dare l'opzione per tornare al documento originale.

È possibile modificare la proprietà href dell'oggetto della posizione utilizzando jQuery anche in questo modo

$(location).attr('href',url);

E quindi puoi reindirizzare l'utente ad un altro URL.




Fondamentalmente jQuery è solo un framework JavaScript e per fare alcune delle cose come il reindirizzamento in questo caso, puoi semplicemente usare puro JavaScript, quindi in quel caso hai 3 opzioni usando vanilla JavaScript:

1) Usando la sostituzione posizione, questo sostituirà la cronologia corrente della pagina, significa che non è possibile utilizzare il pulsante Indietro per tornare alla pagina originale.

window.location.replace("http://.com");

2) Usando la posizione assegnata , questo manterrà la cronologia per te e con il pulsante indietro, puoi tornare alla pagina originale:

window.location.assign("http://.com");

3) Consiglio di utilizzare uno di questi modi precedenti, ma questa potrebbe essere la terza opzione che utilizza puro JavaScript:

window.location.href="http://.com";

Puoi anche scrivere una funzione in jQuery per gestirla, ma non è raccomandata in quanto è una sola funzione JavaScript di una sola riga, inoltre puoi usare tutte le funzioni di cui sopra senza finestra se sei già in ambito finestra, ad esempio window.location.replace("http://.com"); potrebbe essere location.replace("http://.com");

Inoltre li mostro tutti sull'immagine qui sotto:




var url = 'asdf.html';
window.location.href = url;



Funziona con jQuery:

$(window).attr("location", "http://google.fr");



Quindi, la domanda è come creare una pagina di reindirizzamento e non come reindirizzare a un sito Web?

Hai solo bisogno di usare JavaScript per questo. Ecco un piccolo codice che creerà una pagina di reindirizzamento dinamico.

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

Quindi dì che hai appena inserito questo snippet in un file redirect/index.html sul tuo sito web, puoi usarlo in questo modo.

http://www.mywebsite.com/redirect?url=http://.com

E se vai a quel link, ti ​​reindirizzerà automaticamente su .com .

Link alla documentazione

Ed è così che si crea una pagina di reindirizzamento semplice con JavaScript

Modificare:

C'è anche una cosa da notare. Ho aggiunto window.location.replace nel mio codice perché penso che si adatti a una pagina di reindirizzamento, ma, devi sapere che quando si utilizza window.location.replace e si viene reindirizzati, quando si preme il pulsante Indietro nel browser non sarà torna alla pagina di reindirizzamento, e tornerà alla pagina precedente, dai un'occhiata a questa piccola cosa demo.

Esempio:

Il processo: store home => reindirizza la pagina a google => google

Quando su google: google => pulsante indietro nel browser => salva casa

Quindi, se questo è adatto alle tue esigenze, allora tutto dovrebbe andare bene. Se vuoi includere la pagina di reindirizzamento nella cronologia del browser, sostituiscilo

if( url ) window.location.replace(url);

con

if( url ) window.location.href = url;



Sulla tua funzione click, aggiungi:

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});






Per prima cosa scrivi correttamente. Si desidera navigare all'interno di un'applicazione per un altro collegamento dalla propria applicazione per un altro collegamento. Ecco il codice:

window.location.href = "http://www.google.com";

E se vuoi navigare tra le pagine all'interno della tua applicazione, allora ho anche il codice, se vuoi.




In JavaScript e jQuery possiamo usare il seguente codice per reindirizzare la pagina in un'altra pagina:

window.location.href="http://google.com";
window.location.replace("page1.html");



Javascript:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

jquery:

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window



Ci sono tre modi principali per farlo,

window.location.href='blaah.com';
window.location.assign('blaah.com');

e...

window.location.replace('blaah.com');

L'ultimo è il migliore, per un reindirizzamento tradizionale, perché non salverà la pagina a cui sei andato prima di essere reindirizzato nella cronologia delle ricerche. Tuttavia, se si desidera solo aprire una scheda con JavaScript, è possibile utilizzare uno dei precedenti. 1

EDIT: il prefisso della window è facoltativo.




Related

javascript jquery redirect