¿Cómo redireccionar hacia otro sitio web?

¿Cómo puedo redireccionar el usuario desde una página hacia otra usando jQuery o puro JavaScript?

  • javascript
  • jquery
  • redirect
7 Repuestas

Alguien no simplemente redirecciona usando jQuery

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

window.location.replace(...) es mejor que usar window.location.href, ya que replace() no mantiene la pagina originaria en la sesión del historial, lo que significa que el usuario no se quedará atascado en un interminable fiasco de un botón de retroceso.

Si quieres simular a alguien haciendo clic en un link, usa location.href

Si quieres simular una HTTP, usa location.replace

Por ejemplo:

// comportamiento similar a un redireccionamiento HTTP
window.location.replace("http://stackoverflow.com");

// un comportamiento similar al hacer clic en un enlace
window.location.href = "http://stackoverflow.com";

Precaución: Esta respuesta ha sido meramente proporcionada como una posible solución; obviamente no es la mejor solución ya que requiere de jQuery. En cambio, prefiere una solución de JavaScript pura.

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

La forma JavaScript "vanilla" estándar para redireccionar a una página

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

O más simple: (Ya que window es Global)

location.href = 'nuevaPagina.html';

Si estas aquí por estas perdiendo HTTP_REFERER cuando redirecionas, continúa leyendo:

(Si no, ignora la última parte)

La siguiente sección es para aquellos que usan HTTP_REFERER como una de las medidas seguras (aunque no es una buena perspectiva de medición) Si estas usando Internet Explorer 8 o inferior, estas variables se pierde cuando usas cualquier versión de página de redirección de JavaScript (location.href, etc.).

Debajo vamos a implementar una alternativa para IE8 & inferior para que no perdamos HTTP_REFERER. Por otra parte casi siempre simplemente usa window.location.href.

Verificar nuevamente HTTP_REFERER (pegado URL, sesión, etc.) puede ser útil diciendo si un requerimiento es legítimo. (Ten en cuenta: también hay formas de evitar/refutar estas referencias, como se señala en el enlace de droop en los comentarios).


Una sencilla solución de prueba entre navegadores. (Retrocede a window.location.href for Internet Explorer 9+ y otros navegadores)

Uso: redirect('otraPagina.aspx');

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

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

    // Todos los otros exploradores pueden el estandar window.location.href (they don't lose HTTP_REFERER como Internet Explorer 8 & inferior)
    else {
        window.location.href = url;
    }
}

Hay muchas maneras de hacer esto.

// 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 en todos los exploradores:

window.location.href = 'cada_url';

Esto ayudaría si fueras un poco más descriptivo en lo que estás tratando de hacer. Si estás tratando de generar datos paginados, hay algunas opiniones de cómo hacer esto. Puedes generar enlaces separados por cada página que quieras conseguir.

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

Ten en cuenta que la pagina actual en este ejemplo esta manejada diferente en el código con CSS.

Si deseas que los datos paginados se cambien a través de AJAX, es aquí donde jQuery aparecería. Lo que harías es agregar un controlador de clic a cada una de las etiquetas de anclaje correspondientes a una página diferente. Este controlador de clic invocaría algún código jQuery que va y busca a la siguiente página vía AJAX y actualiza a la tabla con la nueva información. El ejemplo de abajo asume que tienes un servicio web que vuelve a la nueva página de información.

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

Además creo que location.replace(URL) es la mejor manera, pero si quieres notificar a los motores de búsqueda acerca de tu redirección (estos no analizan código JavaScript para ver la dirección) deberías agregar la meta etiqueta rel="canonical" a tu sitio web.

Agregar una sección No Script con un HTML actualiza a la etiqueta meta, esta también es conocida como una solución. Te sugiero usar esto JavaScript redirection tool para crear redirecciones. Esto también tiene soporte de Internet Explorer.

El código de muestra sin demora se ve de la siguiente manera


    <!-- Coloca este fragmento justo después de abrir la etiqueta head para que funcione correctamente -->

    <!-- Este código está licenciado bajo GNU GPL v3 -->
    <!-- Puedes, libremente, copiar, distribuir y usar este código, pero borrar los créditos de autor, está estrictamente prohibido -->
    <!-- Generado por http://insider.zone/tools/client-side-url-redirect-generator/ -->

    <!-- LA REDIRECCION COMIENZA -->
    <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 y más baja para pasar el referer http
        {
            document.write("redirecting..."); // No eliminar esta linea o appendChild() fallará ya que esta es llamada antes de document.onload para hacer la redirección los más rápida posible. Nadie verá este texto ya que es una reparación técnica
            var referLink = document.createElement("a");
            referLink.href = url;
            document.body.appendChild(referLink);
            referLink.click();
        }
        else { window.location.replace(url); } // Todos otros exploradores
    </script>
    <!-- Credito a http://insider.zone/ -->
    <!-- LA REDIRECCION TERMINA -->