Come faccio a reindirizzare a un'altra pagina web?
Come posso reindirizzare l'utente da una pagina all'altra utilizzando jQuery o JavaScript puro?
Risposte
Non si esegue semplicemente il reindirizzamento utilizzando jQuery
jQuery non è necessario e window.location.replace(...)simulerà al meglio un reindirizzamento HTTP.
window.location.replace(...)è meglio dell'utilizzo window.location.href, perché replace()non mantiene la pagina di origine nella cronologia della sessione, il che significa che l'utente non rimarrà bloccato in un infinito fiasco del pulsante Indietro.
Se vuoi simulare qualcuno che fa clic su un link, usa location.href
Se vuoi simulare un reindirizzamento HTTP, usa 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";
ATTENZIONE: questa risposta è stata semplicemente fornita come una possibile soluzione; ovviamente non è la soluzione migliore, in quanto richiede jQuery. Preferisci invece la pura soluzione JavaScript.
$(location).attr('href', 'http://stackoverflow.com')
Metodo JavaScript "vaniglia" standard per reindirizzare una pagina
window.location.href = 'newPage.html';
O più semplicemente: (poiché windowè globale)
location.href = 'newPage.html';
Se sei qui perché stai perdendo HTTP_REFERER durante il reindirizzamento, continua a leggere:
(Altrimenti ignora quest'ultima parte)
La sezione seguente è per coloro che utilizzano HTTP_REFERERcome una delle tante misure di sicurezza (sebbene non sia una grande misura di protezione). Se utilizzi Internet Explorer 8 o versioni precedenti, queste variabili vanno perse quando utilizzi qualsiasi forma di reindirizzamento della pagina JavaScript (location.href, ecc.).
Di seguito implementeremo un'alternativa per IE8 e versioni precedenti in modo da non perdere HTTP_REFERER. Altrimenti, puoi quasi sempre usare semplicemente window.location.href.
Il test HTTP_REFERER(incolla URL, sessione, ecc.) Può aiutare a capire se una richiesta è legittima. ( Nota: ci sono anche modi per aggirare / falsificare questi referrer, come notato dal link di droop nei commenti)
Semplice soluzione di test cross-browser (fallback a window.location.href per Internet Explorer 9+ e tutti gli altri browser)
Utilizzo: 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;
}
}
Ci sono molti modi per farlo.
// 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')
Funziona con tutti i browser:
window.location.href = 'your_url';
Sarebbe utile se fossi un po 'più descrittivo in quello che stai cercando di fare. Se stai cercando di generare dati impaginati, ci sono alcune opzioni su come farlo. È possibile generare collegamenti separati per ogni pagina a cui si desidera 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 viene gestita in modo diverso nel codice e con CSS.
Se vuoi che i dati impaginati vengano modificati tramite AJAX, è qui che entra in gioco 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 richiama un codice jQuery che va a recuperare la pagina successiva tramite AJAX e aggiorna la tabella con i nuovi dati. L'esempio seguente presuppone che si disponga di un servizio Web che restituisce i nuovi dati della 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 avvisare i motori di ricerca del tuo reindirizzamento (non analizzano il codice JavaScript per vedere il reindirizzamento) dovresti aggiungere il rel="canonical"meta tag al tuo sito web.
Anche l'aggiunta di una sezione noscript con un meta tag di aggiornamento HTML è 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 indugio è simile a questo:
<!-- 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 -->
Ma se qualcuno vuole reindirizzare di nuovo alla home page, può utilizzare il seguente frammento.
window.location = window.location.host
Sarebbe utile avere tre diversi ambienti come sviluppo, messa in scena e produzione.
Puoi esplorare questo oggetto window.location o window.location semplicemente inserendo queste parole nella console di Chrome o di Firebug .
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. Puoi creare un nuovo oggetto Posizione con l'URL corrente come segue.
var currentLocation = window.location;
Struttura di base di un URL
<protocol>//<hostname>:<port>/<pathname><search><hash>
Protocollo: specifica il nome del protocollo da utilizzare per accedere alla risorsa su Internet. (HTTP (senza SSL) o HTTPS (con SSL))
hostname - Il nome host specifica l'host che possiede la risorsa. Ad esempio, www.stackoverflow.com. Un server fornisce servizi utilizzando il nome dell'host.
porta - Un numero di porta utilizzato per riconoscere un processo specifico a cui deve essere inoltrato un messaggio Internet o altro messaggio di rete quando arriva a un server.
pathname - Il percorso fornisce informazioni sulla risorsa specifica all'interno dell'host a cui il client Web desidera accedere. Ad esempio, stackoverflow.com/index.html.
query: una stringa di query segue il componente path e fornisce una stringa di informazioni che la risorsa può utilizzare per uno scopo (ad esempio, come parametri per una ricerca o come dati da elaborare).
hash - La parte di ancoraggio di un URL, include il segno cancelletto (#).
Con queste proprietà dell'oggetto Location è possibile accedere a tutti questi componenti URL
- hash -Imposta o restituisce la parte di ancoraggio di un URL.
- host -Imposta o restituisce il nome host e la porta di un URL.
- hostname -Imposta o restituisce il nome host di un URL.
- href -Imposta o restituisce l'intero URL.
- pathname -Imposta o restituisce il nome del percorso di un URL.
- port: imposta o restituisce il numero di porta utilizzato dal server per un URL.
- protocollo: imposta o restituisce il protocollo di un URL.
- ricerca: imposta o restituisce la porzione di query di un URL
Ora se vuoi cambiare una pagina o reindirizzare l'utente a un'altra pagina puoi usare la hrefproprietà dell'oggetto Posizione in questo modo
È possibile utilizzare la proprietà href dell'oggetto Location.
window.location.href = "http://www.stackoverflow.com";
Anche l'oggetto posizione dispone di questi tre metodi
- assign () - Carica un nuovo documento.
- reload () - Ricarica il documento corrente.
- sostituire () - Sostituisce il documento corrente con uno nuovo
Puoi usare i metodi assign () e replace anche per reindirizzare ad altre pagine come queste
location.assign("http://www.stackoverflow.com");
location.replace("http://www.stackoverflow.com");
Come differiscono assign () e replace () - La differenza tra il metodo replace () e il metodo assign () (), è che replace () rimuove l'URL del documento corrente dalla cronologia del documento, significa che non è possibile utilizzarlo il pulsante "indietro" per tornare al documento originale. Quindi usa il metodo assign () se vuoi caricare un nuovo documento e vuoi dare la possibilità di tornare al documento originale.
Puoi cambiare la proprietà href dell'oggetto location usando jQuery anche in questo modo
$(location).attr('href',url);
E quindi puoi reindirizzare l'utente a un altro URL.
Fondamentalmente jQuery è solo un framework JavaScript e per fare alcune cose come il reindirizzamento in questo caso, puoi semplicemente usare JavaScript puro, quindi in quel caso hai 3 opzioni usando JavaScript vanilla:
1) Utilizzando posizione sostituire , questo sostituirà la storia attuale della pagina, significa che non è possibile utilizzare il posteriore pulsante per tornare alla pagina originale.
window.location.replace("http://stackoverflow.com");
2) Utilizzando l' assegnazione della posizione , questo manterrà la cronologia per te e utilizzando il pulsante Indietro, puoi tornare alla pagina originale:
window.location.assign("http://stackoverflow.com");
3) Consiglio di utilizzare uno di questi metodi precedenti, ma questa potrebbe essere la terza opzione utilizzando JavaScript puro:
window.location.href="http://stackoverflow.com";
Puoi anche scrivere una funzione in jQuery per gestirla, ma non è consigliato in quanto è solo una funzione JavaScript pura di una riga, inoltre puoi utilizzare tutte le funzioni di cui sopra senza finestra se sei già nell'ambito della finestra, ad esempio window.location.replace("http://stackoverflow.com");potrebbe esserelocation.replace("http://stackoverflow.com");
Inoltre li mostro tutti nell'immagine qui sotto:
Dovrebbe essere solo in grado di impostare utilizzando window.location.
Esempio:
window.location = "https://stackoverflow.com/";
Ecco un post precedente sull'argomento: Come faccio a reindirizzare a un'altra pagina web?
Prima di iniziare, jQuery è una libreria JavaScript utilizzata per la manipolazione del DOM. Quindi non dovresti usare jQuery per un reindirizzamento della pagina.
Una citazione da Jquery.com:
Sebbene jQuery possa funzionare senza grossi problemi nelle versioni precedenti del browser, non testiamo attivamente jQuery in esse e generalmente non risolviamo i bug che potrebbero apparire in esse.
È stato trovato qui: https://jquery.com/browser-support/
Quindi jQuery non è una soluzione definitiva per la compatibilità con le versioni precedenti.
La seguente soluzione che utilizza JavaScript grezzo funziona in tutti i browser ed è stata standard per molto tempo, quindi non è necessaria alcuna libreria per il supporto cross browser.
Questa pagina verrà reindirizzata 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>
Le 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 stato nella cronologia. Se desideri che l'utente possa tornare alla pagina di reindirizzamento, utilizza window.location.hrefo window.location.assign. Se utilizzi un'opzione che consente all'utente di tornare alla pagina di reindirizzamento, ricorda che quando entri nella pagina di reindirizzamento ti reindirizzerà di nuovo. Quindi tienilo in considerazione quando scegli un'opzione per il tuo reindirizzamento. In condizioni in cui la pagina viene reindirizzata solo quando viene eseguita un'azione dall'utente, la presenza della pagina nella cronologia del pulsante Indietro andrà bene. Ma se la pagina si reindirizza automaticamente, è necessario utilizzare Sostituisci in modo che l'utente possa utilizzare il pulsante Indietro senza essere costretto a tornare alla pagina inviata dal reindirizzamento.
Puoi anche utilizzare i metadati per eseguire un reindirizzamento di pagina come segue.
META Refresh
<meta http-equiv="refresh" content="0;url=http://evil.com/" />
Posizione META
<meta http-equiv="location" content="URL=http://evil.com" />
BASE Hijacking
<base href="http://evil.com/" />
Molti altri metodi per reindirizzare il tuo ignaro cliente a una pagina che potrebbero non voler andare possono essere trovati in questa pagina (nessuno di loro fa affidamento su jQuery):
https://code.google.com/p/html5security/wiki/RedirectionMethods
Vorrei anche sottolineare che le persone non amano essere reindirizzate in modo casuale. Reindirizza le persone solo quando è assolutamente necessario. Se inizi a reindirizzare le persone in modo casuale, non torneranno mai più al tuo sito.
Il paragrafo successivo è ipotetico:
Potresti anche essere segnalato come sito dannoso. Se ciò accade, quando le persone fanno clic su un collegamento al tuo sito, il browser degli utenti potrebbe avvertirle che il tuo sito è dannoso. Quello che può anche accadere è che i motori di ricerca potrebbero iniziare a perdere la tua valutazione se le persone segnalano una brutta esperienza sul tuo sito.
Consulta le Istruzioni per i webmaster di Google sui reindirizzamenti: https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971
Ecco una piccola pagina divertente che ti butta 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 combini insieme i due esempi di pagina, avresti un ciclo infantile di reindirizzamento che garantirà che il tuo 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 utilizzando il metodo 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";.
Domanda originale: "Come reindirizzare utilizzando jQuery?", Quindi la risposta implementa jQuery >> Caso di utilizzo gratuito.
Per reindirizzare semplicemente a una pagina con JavaScript:
window.location.href = "/contact/";
O se hai bisogno di un ritardo:
setTimeout(function () {
window.location.href = "/contact/";
}, 2000); // Time in milliseconds
jQuery ti consente di selezionare facilmente elementi da una pagina web. Puoi trovare tutto ciò che desideri su una pagina e quindi utilizzare jQuery per aggiungere effetti speciali, reagire alle azioni dell'utente o mostrare e nascondere il contenuto all'interno o all'esterno dell'elemento selezionato. Tutte queste attività iniziano con il sapere come selezionare un elemento o un evento .
$('a,img').on('click',function(e){ e.preventDefault(); $(this).animate({
opacity: 0 //Put some CSS animation here
}, 500);
setTimeout(function(){
// OK, finished jQuery staff, let's go redirect
window.location.href = "/contact/";
},500);
});
Immagina che qualcuno abbia scritto uno script / plugin con 10000 righe di codice. Con jQuery puoi connetterti a questo codice con solo una o due righe.
Devi inserire questa riga nel codice:
$(location).attr("href","http://stackoverflow.com");
Se non hai jQuery, vai con JavaScript:
window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
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 supponi di inserire questo frammento in un redirect/index.htmlfile sul tuo sito web e puoi usarlo in questo modo.
http://www.mywebsite.com/redirect?url=http://stackoverflow.com
E se vai a quel link, verrai reindirizzato automaticamente a stackoverflow.com .
Collegamento alla documentazione
Ed è così che crei una pagina di reindirizzamento semplice con JavaScript
Modificare:
C'è anche una cosa da notare. Ho aggiunto il window.location.replacemio codice perché penso che si adatti a una pagina di reindirizzamento, ma devi sapere che quando usi window.location.replacee vieni reindirizzato, quando premi il pulsante Indietro nel tuo browser non tornerà alla pagina di reindirizzamento e lo farà torna alla pagina precedente, dai un'occhiata a questa piccola cosa demo.
Esempio:
Il processo: store home => reindirizza la pagina a google => google
Quando sei su google: google => pulsante indietro nel browser => home store
Quindi, se questo si adatta alle tue esigenze, allora dovrebbe andare tutto bene. Se desideri includere la pagina di reindirizzamento nella cronologia del browser, sostituiscila
if( url ) window.location.replace(url);
con
if( url ) window.location.href = url;
Nella funzione clic, aggiungi semplicemente:
window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
window.location.href = "http://www.google.com";
});
Prova questo:
location.assign("http://www.google.com");
Snippet di codice di esempio .
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').
Prima scrivi correttamente. Si desidera navigare all'interno di un'applicazione per un altro collegamento dall'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, ho anche il codice, se vuoi.
Puoi reindirizzare in jQuery in questo modo:
$(location).attr('href', 'http://yourPage.com/');
Utilizzando JavaScript:
Metodo 1:
window.location.href="http://google.com";
Metodo 2:
window.location.replace("http://google.com");
Utilizzando jQuery:
Metodo 1: $ (posizione)
$(location).attr('href', 'http://google.com');
Metodo 2: funzione riutilizzabile
jQuery.fn.redirectTo = function(url){
window.location.href = url;
}
jQuery(window).redirectTo("http://google.com");
In JavaScript e jQuery possiamo utilizzare il seguente codice per reindirizzare una pagina a 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 ha chiesto una soluzione "usando jQuery" che in questo caso implica forzarlo in qualche modo nell'equazione.
A quanto pare Ferrybig ha bisogno che lo scherzo sia spiegato (sto ancora scherzando, sono sicuro che ci sono opzioni limitate nel modulo di revisione), quindi senza ulteriori indugi:
Altre risposte utilizzano inutilmente jQuery attr()sugli oggetti locationo window.
Anche questa risposta ne abusa, ma in un modo più ridicolo. Invece di usarlo per impostare la posizione, questo utilizza attr()per recuperare una funzione che imposta la posizione.
La funzione ha un nome jQueryCodeanche se non c'è nulla di jQuery al riguardo, e chiamare una funzione somethingCodeè semplicemente orribile, specialmente quando qualcosa non è nemmeno un linguaggio.
"85 byte" è un riferimento a Code Golf. Il golf ovviamente non è qualcosa che dovresti fare al di fuori del golf in codice, e inoltre questa risposta chiaramente non è effettivamente golf.
Fondamentalmente, rabbrividire.
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
Ecco un reindirizzamento ritardato. Puoi impostare il tempo di ritardo come preferisci:
<!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>
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 desideri semplicemente aprire una scheda con JavaScript, puoi utilizzare uno dei precedenti. 1
EDIT: il windowprefisso è facoltativo.