javascript - Come reindirizzare a un'altra pagina web?


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



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://.com");

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



ATTENZIONE: questa risposta è stata semplicemente fornita come possibile soluzione; ovviamente non è la soluzione migliore, poiché richiede jQuery. Invece, preferisci la pura soluzione JavaScript.

$(location).attr('href', 'http://.com')



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; 
    }
}



Uso:

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')



Questo funziona per ogni browser:

window.location.href = 'your_url';



Sarebbe utile se tu fossi un po 'più descrittivo in quello che stai cercando di fare. Se stai cercando di generare dati pagati, ci sono alcune opzioni su come farlo. È possibile generare collegamenti separati per ciascuna pagina a cui si desidera poter accedere direttamente.

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

Si noti che la pagina corrente nell'esempio è gestita in modo diverso nel codice e con CSS.

Se vuoi che i dati pagati vengano modificati tramite AJAX, è qui che entrerà jQuery. Quello che dovresti fare è aggiungere un gestore di clic a ciascuno dei tag di ancoraggio corrispondenti a una pagina diversa. Questo gestore di clic invoca un codice jQuery che va e recupera la pagina successiva tramite AJAX e aggiorna la tabella con i nuovi dati. Nell'esempio seguente si presuppone che si disponga di un servizio Web che restituisce i dati della nuova pagina.

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});



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:

<!-- Pleace 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 -->



Ma se qualcuno vuole reindirizzare nuovamente alla home page, può usare il seguente frammento.

window.location = window.location.host

Sarebbe utile se hai tre diversi ambienti come sviluppo, messa in scena e produzione.

Puoi esplorare questa finestra o l'oggetto window.location semplicemente mettendo queste parole in Chrome Console o Firebug 's Console.




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.







Prima di iniziare, jQuery è una libreria JavaScript utilizzata per la manipolazione DOM. Quindi non dovresti usare jQuery per un reindirizzamento di pagina.

Una citazione da Jquery.com:

Sebbene jQuery possa essere eseguito senza grossi problemi nelle versioni precedenti dei browser, non testiamo attivamente jQuery e generalmente non risolviamo bug che potrebbero apparire in essi.

È stato trovato qui: https://jquery.com/browser-support/

Quindi jQuery non è una soluzione completa per la retrocompatibilità.

La seguente soluzione che utilizza JavaScript raw funziona in tutti i browser e è stata standard per un lungo periodo di tempo, quindi non hai bisogno di librerie per il supporto cross browser.

Questa pagina verrà reindirizzato a Google dopo 3000 millisecondi

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

Diverse opzioni sono le seguenti:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

Quando si utilizza la sostituzione, il pulsante Indietro non tornerà alla pagina di reindirizzamento, come se non fosse mai nella cronologia. Se si desidera che l'utente possa tornare alla pagina di reindirizzamento, utilizzare window.location.href o window.location.assign . Se usi un'opzione che consente all'utente di tornare alla pagina di reindirizzamento, ricorda che quando si entra nella pagina di reindirizzamento verrà reindirizzato. Quindi mettilo in considerazione quando scegli un'opzione per il tuo reindirizzamento. In condizioni in cui la pagina sta reindirizzando solo quando un'azione viene eseguita dall'utente, la pagina nella cronologia del pulsante Indietro sarà a posto. Tuttavia, se la pagina reindirizza automaticamente, è necessario utilizzare la sostituzione in modo che l'utente possa utilizzare il pulsante Indietro senza dover tornare indietro alla pagina inviata dal reindirizzamento.

Puoi anche utilizzare i metadati per eseguire un reindirizzamento della pagina come seguito.

META Aggiorna

<meta http-equiv="refresh" content="0;url=http://evil.com/" />

META Location

<meta http-equiv="location" content="URL=http://evil.com" />

BASE Hijacking

<base href="http://evil.com/" />

In questa pagina sono disponibili molti altri metodi per reindirizzare il client ignaro a una pagina che potrebbero non desiderare di visitare (non uno di questi dipende da jQuery):

https://code.google.com/p/html5security/wiki/RedirectionMethods

Vorrei anche sottolineare che le persone non amano essere reindirizzate casualmente. Solo reindirizzare le persone quando assolutamente necessario. Se inizi a reindirizzare le persone a caso, non torneranno più sul tuo sito.

La parte successiva è ipotetica:

Potresti anche essere segnalato come sito dannoso. Se ciò accade, quando gli utenti fanno clic su un collegamento al tuo sito, il browser degli utenti potrebbe avvisare che il tuo sito è dannoso. Quello che potrebbe anche accadere è che i motori di ricerca potrebbero iniziare a perdere il tuo voto se le persone riportano una brutta esperienza sul tuo sito.

Consulta le Istruzioni per i webmaster di Google relative ai reindirizzamenti: https://support.google.com/webmasters/answer/2721217?hl=it&ref_topic=6001971

Ecco una piccola pagina divertente che ti prende a calci fuori dalla pagina.

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

Se unisci gli esempi di due pagine insieme, avresti un ciclo di reinstradamento infantile che garantirà che l'utente non vorrà mai più utilizzare il tuo sito.




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



Puoi farlo senza jQuery come:

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

E se vuoi solo jQuery, puoi farlo come:

$jq(window).attr("location","http://yourdomain.com");



Funziona con jQuery:

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



# Reindirizzamento della pagina HTML con jQuery / JavaScript

Prova questo codice di esempio:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "login.php";
    else
        window.location = "Logout.php";
}

Se vuoi fornire un URL completo come window.location = "www.google.co.in"; .




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";
});



Fondamentalmente jQuery è una libreria JavaScript e per fare alcune delle cose come il reindirizzamento, puoi usare puro JavaScript, quindi in quel caso hai 3 opzioni usando JavaScript vanilla:

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 l'utilizzo del 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:







jQuery non è necessario. Puoi farlo:

window.open("URL","_self","","")

È così facile!

Il modo migliore per avviare una richiesta HTTP è con document.loacation.href.replace('URL') .




Devi inserire questa riga nel tuo codice

$(location).attr('href',"http://.com");

Se non stai avendo il Jquery, vai con javascript con

window.location.replace("http://.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.




Puoi reindirizzare in jQuery in questo modo:

$(location).attr('href', 'http://yourPage.com/');



Per reindirizzare semplicemente a una pagina:

  window.location.href = "/destination.html";

O se hai bisogno di un ritardo:

setTimeout(function () {
  window.location.href = "/destination.html";
}, 2000);   // Time in milliseconds

jQuery consente di selezionare elementi da una pagina Web con facilità. Puoi trovare tutto ciò che vuoi in una pagina e poi usare jQuery per aggiungere effetti speciali, reagire alle azioni degli utenti, o mostrare e nascondere il contenuto all'interno o all'esterno dell'elemento che hai selezionato. Tutti questi compiti iniziano con la conoscenza di come selezionare un elemento .

function redirect () {
    $('selection').animate({
        marginLeft: 100px; //Put some CSS animation here
    }, 500, function () {
      // OK, finished jQuery staff, let's go redirect
      window.location.href = "/destination.html";
})

Immagina che qualcuno abbia scritto uno script / plugin che contiene 10000 linee di codice ?! Bene, con jQuery puoi connetterti a questo codice con solo una o due righe.




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");



ECMAScript 6 + jQuery, 85 byte

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

Per favore non uccidermi, questo è uno scherzo. È uno scherzo. È uno scherzo.

Questo ha "fornito una risposta alla domanda", nel senso che richiedeva una soluzione "usando jQuery" che in questo caso implica forzare l'equazione in qualche modo.

A quanto pare, Ferrybig ha bisogno che lo scherzo (ancora sto scherzando, sono sicuro che ci sono opzioni limitate sul modulo di recensione), quindi senza ulteriori indugi:

Altre risposte utilizzano attr() di jQuery sugli oggetti location o window inutilmente.

Anche questa risposta lo abusa, ma in un modo più ridicolo. Invece di usarlo per impostare la posizione, utilizza attr() per recuperare una funzione che imposta la posizione.

La funzione si chiama jQueryCode anche se non c'è niente jQuery su di esso, e chiamando una funzione somethingCode è semplicemente orribile, specialmente quando il qualcosa non è nemmeno un linguaggio.

"85 byte" è un riferimento a Code Golf. Il golf non è ovviamente qualcosa che dovresti fare al di fuori del codice golf, e inoltre questa risposta non è chiaramente giocata a golf.

Fondamentalmente, rabbrividire.




Ecco un reindirizzamento temporale. Puoi impostare il tempo di ritardo su quello che vuoi:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>



Ho solo dovuto aggiornare questa ridicolaggine con un altro metodo jQuery più recente:

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);



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.