[Javascript] Come reindirizzare a un'altra pagina web?


Answers

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://stackoverflow.com')
Question

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




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



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.




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.




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;



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

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



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.




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.




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')



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.




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') .




Funziona con jQuery:

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



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