javascript - ¿Cómo redirigir a otra página web?


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



Answers



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 usar 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 back-end interminable. botón fiasco.

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

// similar behavior as clicking on a link
window.location.href = "http://.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, prefiere la solución de JavaScript puro.

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



Forma JavaScript estándar "vainilla" para redirigir una página:

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

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

La siguiente sección es para aquellos que usan HTTP_REFERER como una de muchas medidas de seguridad (aunque no es una gran medida de protección). Si usa Internet Explorer 8 o versiones anteriores, estas variables se pierden al usar cualquier forma de redirección de páginas JavaScript (location.href, etc.).

A continuación vamos a implementar una alternativa para IE8 y versiones inferiores para que no perdamos HTTP_REFERER. De lo contrario, casi siempre puedes simplemente usar window.location.href .

Las pruebas en contra de HTTP_REFERER (pegado de URL, sesión, etc.) pueden ser útiles para determinar si una solicitud es legítima. ( Nota: también hay formas de evitar / falsificar estas referencias, como se señala en el enlace de droop en los comentarios)

Solución simple de prueba de varios navegadores (alternativa 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; 
    }
}



Utilizar:

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



Ayudaría si fueras un poco más descriptivo en lo que intentas hacer. Si intenta 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 quiere que los datos paginados se modifiquen a través de AJAX, aquí es donde entrará jQuery. Lo que haría sería agregar un manejador de clics a cada una de las etiquetas de anclaje correspondientes a una página diferente. Este controlador de clic invocaría un código jQuery que iría a la página siguiente a través de AJAX y actualizaría la tabla con los datos nuevos. 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 meta de rel="canonical" etiqueta a su sitio web.

Agregar una sección noscript con una metaetiqueta de actualización HTML en él, 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 la referencia HTTP.

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

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



Pero si alguien quiere redireccionar 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 o el objeto window.location simplemente colocando estas palabras en la consola de Chrome o en la consola de Firebug .




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 usan el objeto Location, que es una propiedad del objeto Window. Puede crear un nuevo objeto de 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..com. Un servidor proporciona servicios usando el nombre del host.

  3. puerto: un número de puerto que se usa para reconocer un proceso específico al que se enviará un mensaje de Internet u otro mensaje de red cuando llegue a un servidor.

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

  5. consulta: una cadena de consulta sigue al 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 procesados).

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

Con estas propiedades de objetos de Ubicación puede acceder a todos estos componentes de URL

  1. hash: ajusta o devuelve la parte de ancla de una URL.
  2. host: establece o devuelve el nombre de host y el puerto de una URL.
  3. nombre de host: establece o devuelve el nombre de host de una URL.
  4. href: restablece 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 usa el servidor para una URL.
  7. protocolo: establece o devuelve el protocolo de una URL.
  8. búsqueda: establece o devuelve la parte de la consulta de una URL

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

Puede usar la propiedad href del objeto Location.

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

El objeto de ubicación también tiene estos tres métodos

  1. assign () : carga un documento nuevo.
  2. reload () - Recarga el documento actual.
  3. replace () - Reemplaza el documento actual por uno nuevo

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

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

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

Cómo assign () y replace () difieren : la diferencia entre el método replace () y el método assign () () es que replace () elimina la URL del documento actual del historial del documento, lo que significa que no es posible usar el botón "volver" para navegar de regreso al documento original. Por lo tanto, utilice el método assign () si desea cargar un nuevo documento, y desee dar la opción de volver al documento original.

Puede cambiar la propiedad href del objeto de ubicación utilizando jQuery también como este

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

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







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

Una cita de Jquery.com:

Si bien jQuery podría ejecutarse sin mayores inconvenientes en las versiones anteriores del navegador, no probamos activamente jQuery en ellos y, en general, no corregimos los errores que puedan aparecer en ellos.

Fue encontrado 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 procesar funciona en todos los navegadores y ha sido estándar durante mucho tiempo, por lo que no necesita ninguna biblioteca para compatibilidad con navegadores cruzados.

Esta página se 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"

Al usar reemplazar, el botón Atrás no volverá a la página de redirección, como si nunca hubiera estado en el historial. Si desea que el usuario pueda volver a la página de redirección, utilice window.location.href o window.location.assign . Si usa una opción que le permite al usuario regresar a la página de redirección, recuerde que cuando ingrese a la página de redirección, se lo redireccionará de regreso. Así que tenlo en cuenta cuando elijas una opción para tu redirección. En condiciones en las que la página solo está redireccionando cuando el usuario realiza una acción, entonces tener la página en el historial del botón de retroceso estará bien. Pero si la página auto redirige, entonces debe usar replace para que el usuario pueda usar el botón Atrás sin tener que volver a la página que envía el redireccionamiento.

También puede usar metadatos para ejecutar una redirección de página como se muestra a continuación.

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 de 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 no desean 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 aleatoriamente. Solo redirige a las personas cuando sea absolutamente necesario. Si comienzas a redireccionar personas aleatoriamente, nunca volverán a visitar tu sitio.

La siguiente parte es hipotética:

También puede ser informado como un sitio malicioso. Si eso sucede, cuando las personas hagan 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 comiencen a disminuir su calificación si las personas informan sobre una mala experiencia en su sitio.

Revise las Directrices para webmasters de Google sobre los redireccionamientos: 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 combinas los dos ejemplos de página juntos, tendrías un ciclo infantil de reencaminamiento que garantizará que tu usuario nunca más quiera utilizar tu sitio.




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



Puedes hacer eso sin jQuery como:

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

Y si solo quieres jQuery, puedes hacerlo como:

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



Esto funciona con jQuery:

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



# HTML página redirigir el uso de jQuery / JavaScript

Prueba 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 proporcionar una URL completa como window.location = "www.google.co.in"; .




Entonces, la pregunta es ¿cómo hacer una página de redirección, y no cómo redireccionar a un sitio web?

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

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

Así que supongamos que colocas este fragmento en un archivo redirect/index.html en tu sitio web y lo puedes usar así.

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

Y si vas a ese enlace, te redirigirá automáticamente a .com .

Enlace a la documentación

Y así es como se hace una página de redirección simple con JavaScript

Editar:

También hay una cosa para notar. He agregado window.location.replace en mi código porque creo que se adapta a una página de redireccionamiento, pero debe saber que cuando usa window.location.replace y lo redirigen, cuando presiona el botón Atrás en su navegador no lo hará Volví a la página de redirección, y volverá 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 Atrás en el navegador => almacenar en casa

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

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



Básicamente jQuery es una biblioteca de JavaScript y para hacer algunas cosas como redirigir, puedes usar JavaScript puro, entonces en ese caso tienes 3 opciones usando JavaScript simple:

1) El uso de la ubicación reemplaza , esto reemplazará el historial actual de la página, significa que no es posible usar el botón Atrás para volver a la página original.

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

2) Usando la asignación de ubicación, esto mantendrá el historial por ti y con el uso del botón Atrás, puedes volver a la página original:

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

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

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

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

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







jQuery no es necesario. Puedes hacerlo:

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

¡Así de fácil!

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




Debes poner esta línea en tu código

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

Si no tienes el Jquery, ve con javascript con

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



Primero escribe correctamente. Desea navegar dentro de una aplicación por 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 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/');



Para redirigir a una página:

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

O si necesita un retraso:

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

jQuery le permite seleccionar elementos de una página web con facilidad. Puede encontrar lo 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 .

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

¡Imagine que alguien escribió un script / plugin que tiene 10000 líneas de código! Bueno, con jQuery puedes conectarte a este código con solo una línea o dos.




En JavaScript y jQuery podemos usar el siguiente código para redirigir la página de 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 pedía una solución "usando jQuery" que en este caso implica forzarla a la ecuación de alguna manera.

Al parecer, Ferrybig necesita que se explique el chiste (sigue 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 la location o en window objetos de la window innecesariamente.

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

La función se llama jQueryCode aunque no hay nada de jQuery al respecto, y llamar a una función somethingCode es simplemente horrible, especialmente cuando algo no es ni siquiera un idioma.

Los "85 bytes" son una referencia a Code Golf. Es obvio que jugar golf no es algo que debas hacer fuera del golf de código, y además esta respuesta claramente no está en el golf.

Básicamente, temblar.




Aquí hay una redirección de retraso de tiempo. Puede establecer el tiempo de demora 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>



Solo tuve que actualizar esta ridiculez con otro método jQuery más nuevo:

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



Hay tres formas principales de hacer esto,

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

y...

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

El último es el mejor para un redireccionamiento tradicional, ya que no guardará la página que visitó antes de ser redirigido 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 prefijo de window es opcional.