¿Cómo puedo redirigir al usuario de una página a otra usando jQuery o JavaScript puro?

Uno no simplemente redirige usando jQuery

jQuery no es necesario y window.location.replace(...)simulará mejor una redirección HTTP.

window.location.replace(...)es mejor que usarlo window.location.href, porque replace()no mantiene la página de origen en el historial de la sesión, lo que significa que el usuario no se quedará atrapado en un fiasco interminable.

Si desea simular a alguien haciendo clic en un enlace, use location.href

Si desea simular una redirección HTTP, use location.replace

Por ejemplo:

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

// Another method for doing redirecting with JavaScript is this:
window.location = "https://stackoverflow.com";

ADVERTENCIA: Esta respuesta simplemente se ha proporcionado como una posible solución; obviamente no es la mejor solución, ya que requiere jQuery. En cambio, prefiera la solución de JavaScript pura.

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

Forma estándar de JavaScript "estándar" para redirigir una página

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

O más simplemente: (ya que windowes Global)

location.href = 'newPage.html';

Si estás aquí porque estás perdiendo HTTP_REFERER al redirigir, sigue leyendo:

(De lo contrario, ignore esta última parte)

La siguiente sección es para aquellos que usan HTTP_REFERERcomo una de las muchas medidas de seguridad (aunque no es una gran medida de protección). Si está utilizando Internet Explorer 8 o una versión anterior, estas variables se pierden al usar cualquier forma de redirección de página JavaScript (location.href, etc.).

A continuación, implementaremos una alternativa para IE8 y versiones inferiores para no perder HTTP_REFERER. De lo contrario, casi siempre puede usar simplemente window.location.href.

Las pruebas contra HTTP_REFERER(pegado de URL, sesión, etc.) pueden ayudar a determinar si una solicitud es legítima. ( Nota: también hay formas de evitar / falsificar estos referentes, como se indica en el enlace de droop en los comentarios)

Solución simple de prueba entre navegadores (recurrir a window.location.href para Internet Explorer 9+ y todos los demás navegadores)

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

Hay muchas formas de hacerlo.

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

Esto funciona para todos los navegadores:

window.location.href = 'your_url';

Sería útil que fuera un poco más descriptivo en lo que está tratando de hacer. Si está intentando generar datos paginados, hay algunas opciones sobre cómo hacerlo. Puede generar enlaces separados para cada página a la que desee acceder directamente.

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

Tenga en cuenta que la página actual en el ejemplo se maneja de manera diferente en el código y con CSS.

Si desea que los datos paginados se cambien a través de AJAX, aquí es donde entraría jQuery. Lo que haría sería agregar un controlador de clic a cada una de las etiquetas de anclaje correspondientes a una página diferente. Este controlador de clics invocará un código jQuery que va y recupera la siguiente página a través de AJAX y actualiza la tabla con los nuevos datos. El siguiente ejemplo supone que tiene un servicio web que devuelve los datos de la nueva página.

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

También creo que location.replace(URL)es la mejor manera, pero si desea notificar a los motores de búsqueda acerca de su redirección (no analizan el código JavaScript para ver la redirección), debe agregar la rel="canonical"metaetiqueta a su sitio web.

Agregar una sección de noscript con una metaetiqueta de actualización HTML también es una buena solución. Le sugiero que use esta herramienta de redirección de JavaScript para crear redirecciones. También tiene soporte de Internet Explorer para pasar el referente HTTP.

El código de muestra sin demora se ve así:

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

Pero si alguien quiere redirigir a la página de inicio, entonces puede usar el siguiente fragmento.

window.location = window.location.host

Sería útil si tiene tres entornos diferentes como desarrollo, puesta en escena y producción.

Puede explorar esta ventana u objeto window.location simplemente colocando estas palabras en Chrome Console o Firebug 's Console.

JavaScript le proporciona muchos métodos para recuperar y cambiar la URL actual que se muestra en la barra de direcciones del navegador. Todos estos métodos utilizan el objeto Ubicación, que es una propiedad del objeto Ventana. Puede crear un nuevo objeto Ubicación que tenga la URL actual de la siguiente manera.

var currentLocation = window.location;

Estructura básica de una URL

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

1. Protocolo: especifica el nombre del protocolo que se utilizará para acceder al recurso en Internet. (HTTP (sin SSL) o HTTPS (con SSL))

2. nombre de host: el nombre de host especifica el host que posee el recurso. Por ejemplo, www.stackoverflow.com. Un servidor proporciona servicios utilizando el nombre del host.

3. puerto: un número de puerto utilizado para reconocer un proceso específico al que se debe reenviar un mensaje de Internet u otra red cuando llega a un servidor.

4. nombre de ruta: la ruta proporciona información sobre el recurso específico dentro del host al que desea acceder el cliente web. Por ejemplo, stackoverflow.com/index.html.

5. consulta: una cadena de consulta sigue el componente de ruta y proporciona una cadena de información que el recurso puede utilizar para algún propósito (por ejemplo, como parámetros para una búsqueda o como datos para procesar).

6. hash: la parte de anclaje de una URL, incluye el signo hash (#).

Con estas propiedades de objeto de ubicación puede acceder a todos estos componentes de URL

1. hash: establece o devuelve la parte de anclaje de una URL.
2. host: establece o devuelve el nombre de host y el puerto de una URL.
3. hostname: establece o devuelve el nombre de host de una URL.
4. href: establece o devuelve la URL completa.
5. Nombre de ruta: establece o devuelve el nombre de ruta de una URL.
6. puerto: establece o devuelve el número de puerto que el servidor usa para una URL.
7. protocolo: establece o devuelve el protocolo de una URL.
8. buscar: establece o devuelve la parte de consulta de una URL

Ahora, si desea cambiar una página o redirigir al usuario a otra página, puede usar la hrefpropiedad del objeto Ubicación de esta manera

Puede usar la propiedad href del objeto Location.

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

Location Object también tiene estos tres métodos

1. asignar () : carga un nuevo documento.
2. reload () : vuelve a cargar el documento actual.
3. replace () - Reemplaza el documento actual por uno nuevo

Puede usar asignar () y reemplazar métodos también para redirigir a otras páginas como estas

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

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

Cómo asignar () y reemplazar () difiere - La diferencia entre el método replace () y el método asignar (), es que replace () elimina la URL del documento actual del historial del documento, lo que significa que no es posible usar el botón "Atrás" para volver al documento original. Por lo tanto, use el método asignar () si desea cargar un nuevo documento y desea dar la opción de navegar de regreso al documento original.

Puede cambiar la propiedad href del objeto de ubicación usando jQuery también de esta manera

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

Y, por lo tanto, puede redirigir al usuario a otra url.

Básicamente, jQuery es solo un marco de JavaScript y para hacer algunas de las cosas como la redirección en este caso, puede usar JavaScript puro, por lo que en ese caso tiene 3 opciones usando JavaScript de vainilla:

1) El uso de la ubicación sustituir , esto va a reemplazar la historia actual de la página, significa que no es posible utilizar la parte posterior botón para volver a la página original.

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

2) Usando la asignación de ubicación , esto mantendrá el historial para usted y con el botón Atrás, puede volver a la página original:

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

3) Recomiendo usar una de esas formas anteriores, pero esta podría ser la tercera opción usando JavaScript puro:

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

También puede escribir una función en jQuery para manejarla, pero no se recomienda ya que es solo una función de JavaScript pura de una línea, también puede usar todas las funciones anteriores sin ventana si ya está en el alcance de la ventana, por ejemplo, window.location.replace("http://stackoverflow.com");podría serlocation.replace("http://stackoverflow.com");

También los muestro a todos en la imagen a continuación:

Debería poder configurar usando window.location.

Ejemplo:

window.location = "https://stackoverflow.com/";

Aquí hay una publicación anterior sobre el tema: ¿Cómo redirijo a otra página web?

Antes de comenzar, jQuery es una biblioteca de JavaScript utilizada para la manipulación DOM. Por lo tanto, no debe usar jQuery para una redirección de página.

Una cita de Jquery.com:

Si bien jQuery podría ejecutarse sin problemas importantes en las versiones anteriores del navegador, no probamos activamente jQuery en ellas y, en general, no solucionamos los errores que pueden aparecer en ellas.

Se encontró aquí: https://jquery.com/browser-support/

Por lo tanto, jQuery no es una solución definitiva para la compatibilidad con versiones anteriores.

La siguiente solución que utiliza JavaScript sin formato funciona en todos los navegadores y ha sido estándar durante mucho tiempo, por lo que no necesita ninguna biblioteca para la compatibilidad entre navegadores.

Esta página redirigirá a Google después de 3000 milisegundos.

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

Las diferentes opciones son las siguientes:

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"

Cuando use reemplazar, el botón de retroceso no volverá a la página de redireccionamiento, como si nunca hubiera estado en el historial. Si desea que el usuario pueda volver a la página de redireccionamiento, use window.location.hrefo window.location.assign. Si utiliza una opción que le permite al usuario volver a la página de redireccionamiento, recuerde que cuando ingrese a la página de redireccionamiento, lo redireccionará. Así que tenga esto en cuenta al elegir una opción para su redirección. En condiciones en las que la página solo se redirige cuando el usuario realiza una acción, entonces tener la página en el historial del botón Atrás estará bien. Pero si la página se redirige automáticamente, entonces debe usar reemplazar para que el usuario pueda usar el botón Atrás sin ser forzado a regresar a la página que envía la redirección.

También puede usar metadatos para ejecutar una redirección de página de la siguiente manera.

META Refresh

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

META Ubicación

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

Secuestro BASE

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

En esta página se pueden encontrar muchos más métodos para redirigir a su cliente desprevenido a una página a la que quizás no quiera ir (ninguno de ellos depende de jQuery):

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

También me gustaría señalar que a las personas no les gusta que las redireccionen al azar. Solo redirige a las personas cuando sea absolutamente necesario. Si comienza a redirigir a las personas al azar, nunca más volverán a su sitio.

El siguiente párrafo es hipotético:

También puede ser informado como un sitio malicioso. Si eso sucede, cuando las personas hacen clic en un enlace a su sitio, el navegador de los usuarios puede advertirles que su sitio es malicioso. Lo que también puede suceder es que los motores de búsqueda pueden comenzar a disminuir su calificación si las personas informan una mala experiencia en su sitio.

Consulte las Directrices para webmasters de Google sobre redirecciones: https://support.google.com/webmasters/answer/2721217?hl=es&ref_topic=6001971

Aquí hay una pequeña página divertida que te saca de la página.

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

Si combina los dos ejemplos de página, tendrá un ciclo de redireccionamiento que garantizará que su usuario nunca más quiera usar su sitio.

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

Puede hacerlo sin jQuery como:

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

Y si solo quieres jQuery, entonces puedes hacerlo como:

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

Esto funciona con jQuery:

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

# Redirección de página HTML usando jQuery / JavaScript

Pruebe este código de ejemplo:

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

Si desea dar una URL completa como window.location = "www.google.co.in";.

Necesita poner esta línea en su código:

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

Si no tiene jQuery, use JavaScript:

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

Pregunta original: "¿Cómo redirigir usando jQuery?", Por lo tanto, la respuesta implementa jQuery >> Caso de uso gratuito.

Para simplemente redirigir a una página con JavaScript:

window.location.href = "/contact/";

O si necesita un retraso:

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

jQuery le permite seleccionar elementos de una página web con facilidad. Puede encontrar cualquier cosa que desee en una página y luego usar jQuery para agregar efectos especiales, reaccionar a las acciones del usuario o mostrar y ocultar contenido dentro o fuera del elemento que ha seleccionado. Todas estas tareas comienzan con saber cómo seleccionar 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);
});

Imagine que alguien escribió un script / complemento con 10000 líneas de código. Con jQuery puede conectarse a este código con solo una línea o dos.

Entonces, la pregunta es cómo hacer una página de redireccionamiento, y no cómo redirigir a un sitio web.

Solo necesita usar JavaScript para esto. Aquí hay un pequeño código que creará una página de redireccionamiento dinámico.

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

Digamos que solo pones este fragmento en un redirect/index.htmlarchivo en tu sitio web, puedes usarlo así.

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

Y si va a ese enlace, lo redirigirá automáticamente a stackoverflow.com .

Enlace a la documentación

Y así es como haces una página de redireccionamiento simple con JavaScript

Editar:

También hay una cosa a tener en cuenta. He agregado window.location.replacemi código porque creo que se adapta a una página de redireccionamiento, pero debe saber que cuando lo usa window.location.replacey es redirigido, cuando presiona el botón Atrás en su navegador no volverá a la página de redireccionamiento, y lo hará. regrese a la página anterior, eche un vistazo a esta pequeña demostración.

Ejemplo:

El proceso: almacenar inicio => redirigir página a google => google

Cuando en google: google => botón de retroceso en el navegador => tienda de inicio

Entonces, si esto satisface sus necesidades, entonces todo debería estar bien. Si desea incluir la página de redireccionamiento en el historial del navegador, reemplace esto

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

con

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

En su función de clic, simplemente agregue:

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

Prueba esto:

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

Fragmento de código de ejemplo .

jQuery no es necesario. Puedes hacerlo:

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

¡Es así de fácil!

La mejor manera de iniciar una solicitud HTTP es con document.loacation.href.replace('URL').

Primero escribe correctamente. Desea navegar dentro de una aplicación para otro enlace desde su aplicación para otro enlace. Aquí está el código:

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

Y si desea navegar por las páginas dentro de su aplicación, también tengo código, si lo desea.

Puede redirigir en jQuery de esta manera:

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

En JavaScript y jQuery podemos usar el siguiente código para redirigir una página a otra:

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

ECMAScript 6 + jQuery, 85 bytes

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

Por favor no me mates, esto es una broma. Es una broma. Esto es una broma.

Esto "proporcionó una respuesta a la pregunta", en el sentido de que pidió una solución "usando jQuery", que en este caso implica forzarla de alguna manera a la ecuación.

Aparentemente, Ferrybig necesita que se explique la broma (aún bromeando, estoy seguro de que hay opciones limitadas en el formulario de revisión), así que sin más preámbulos:

Otras respuestas están usando jQuery's attr()en los objetos locationu windowinnecesariamente.

Esta respuesta también la abusa, pero de una manera más ridícula. En lugar de usarlo para establecer la ubicación, esto se usa attr()para recuperar una función que establece la ubicación.

La función se nombra jQueryCodea pesar de que no hay nada jQuery al respecto, y llamar a una función somethingCodees simplemente horrible, especialmente cuando algo ni siquiera es un idioma.

Los "85 bytes" son una referencia a Code Golf. Obviamente, el golf no es algo que deba hacer fuera del código de golf, y además esta respuesta claramente no es realmente golf.

Básicamente, encogerse.

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

Usando JavaScript:

Método 1:

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

Método 2:

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

Usando jQuery:

Método 1: $ (ubicación)

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

Método 2: función reutilizable

jQuery.fn.redirectTo = function(url){
    window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

Aquí hay una redirección de retraso de tiempo. Puede configurar el tiempo de retraso a lo que desee:

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

Hay tres formas principales de hacer esto:

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

y...

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

La última es la mejor, para una redirección tradicional, porque no guardará la página a la que fue antes de ser redirigida en su historial de búsqueda. Sin embargo, si solo desea abrir una pestaña con JavaScript, puede usar cualquiera de los anteriores. 1

EDITAR: el windowprefijo es opcional.