Como redirecionar o usuário de uma página para outra usando jQuery ou JavaScript puro?

Não basta redirecionar usando jQuery

O jQuery não é necessário e window.location.replace(...)simulará melhor um redirecionamento HTTP.

window.location.replace(...)é melhor do que usar window.location.href, porque replace()não mantém a página de origem no histórico da sessão, o que significa que o usuário não ficará preso em um fiasco interminável de botão voltar.

Se você deseja simular alguém clicando em um link, use location.href

Se você deseja simular um redirecionamento HTTP, use location.replace

Por exemplo:

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

AVISO: Esta resposta foi meramente fornecida como uma solução possível; obviamente não é a melhor solução, pois requer jQuery. Em vez disso, prefira a solução JavaScript pura.

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

Maneira JavaScript "baunilha" padrão para redirecionar uma página

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

Ou, mais simplesmente: (já que windowé Global)

location.href = 'newPage.html';

Se você está aqui porque está perdendo HTTP_REFERER ao redirecionar, continue lendo:

(Caso contrário, ignore esta última parte)

A seção a seguir é para aqueles que usam HTTP_REFERERcomo uma das muitas medidas de segurança (embora não seja uma ótima medida de proteção). Se você estiver usando o Internet Explorer 8 ou inferior, essas variáveis ​​serão perdidas ao usar qualquer forma de redirecionamento de página JavaScript (location.href, etc.).

Abaixo, implementaremos uma alternativa para o IE8 e inferior, para não perdermos o HTTP_REFERER. Caso contrário, você quase sempre pode simplesmente usarwindow.location.href .

Testar contra HTTP_REFERER(colar URL, sessão etc.) pode ajudar a saber se uma solicitação é legítima. ( Nota: também existem maneiras de contornar / falsificar esses referenciadores, conforme observado pelo link de droop nos comentários)

Solução simples de teste entre navegadores (fallback para window.location.href para Internet Explorer 9+ e todos os outros 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; 
    }
}

Existem várias maneiras de fazer isso.

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

Isso funciona para todos os navegadores:

window.location.href = 'your_url';

Ajudaria se você fosse um pouco mais descritivo no que está tentando fazer. Se você está tentando gerar dados paginados, existem algumas opções em como fazer isso. Você pode gerar links separados para cada página que deseja acessar diretamente.

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

Observe que a página atual no exemplo é tratada de maneira diferente no código e com CSS.

Se você deseja que os dados paginados sejam alterados via AJAX, é aqui que o jQuery entra. O que você faria é adicionar um manipulador de cliques a cada uma das tags de âncora correspondentes a uma página diferente. Esse manipulador de cliques invocaria algum código jQuery que acessa a próxima página via AJAX e atualiza a tabela com os novos dados. O exemplo abaixo supõe que você tenha um serviço da web que retorna os dados da nova 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
    });
});

Também acho que location.replace(URL)é o melhor caminho, mas se você deseja notificar os mecanismos de pesquisa sobre seu redirecionamento (eles não analisam o código JavaScript para ver o redirecionamento), adicione a rel="canonical"metatag ao seu site.

Adicionar uma seção noscript com uma metatag de atualização HTML também é uma boa solução. Sugiro que você use esta ferramenta de redirecionamento JavaScript para criar redirecionamentos. Ele também possui suporte ao Internet Explorer para passar o referenciador HTTP.

O código de exemplo sem demora se parece com isso:

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

Mas se alguém quiser redirecionar para a página inicial, ele pode usar o seguinte snippet.

window.location = window.location.host

Seria útil se você tivesse três ambientes diferentes como desenvolvimento, preparo e produção.

Você pode explorar esse objeto window.location colocando apenas essas palavras no Chrome Console ou no Firebug 's Console.

O JavaScript fornece vários métodos para recuperar e alterar o URL atual que é exibido na barra de endereços do navegador. Todos esses métodos usam o objeto Location, que é uma propriedade do objeto Window. Você pode criar um novo objeto Local que tenha o URL atual da seguinte maneira.

var currentLocation = window.location;

Estrutura básica de uma URL

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

1. Protocolo - especifica o nome do protocolo a ser usado para acessar o recurso na Internet. (HTTP (sem SSL) ou HTTPS (com SSL))

2. nome do host - o nome do host especifica o host que possui o recurso. Por exemplo, www.stackoverflow.com. Um servidor fornece serviços usando o nome do host.

3. porta - Um número de porta usado para reconhecer um processo específico para o qual uma Internet ou outra mensagem de rede deve ser encaminhada quando chegar a um servidor.

4. nome do caminho - O caminho fornece informações sobre o recurso específico no host que o cliente da Web deseja acessar. Por exemplo, stackoverflow.com/index.html.

5. query - Uma string de consulta segue o componente do caminho e fornece uma string de informações que o recurso pode utilizar para alguma finalidade (por exemplo, como parâmetros para uma pesquisa ou como dados a serem processados).

6. hash - a parte âncora de um URL, inclui o sinal de hash (#).

Com essas propriedades do objeto Location, você pode acessar todos esses componentes de URL

1. cerquilha define ou retorna a parte âncora de um URL.
2. hospedeiro define ou retorna o nome do host e a porta de uma URL.
3. nome de anfitrião define ou retorna o nome do host de uma URL.
4. href -Define ou retorna o URL inteiro.
5. nome do caminho -Define ou retorna o nome do caminho de uma URL.
6. porta - define ou retorna o número da porta que o servidor usa para uma URL.
7. protocolo - define ou retorna o protocolo de uma URL.
8. search - define ou retorna a parte da consulta de um URL

Agora, se você deseja alterar uma página ou redirecionar o usuário para outra página, pode usar a hrefpropriedade do objeto Location como esta

Você pode usar a propriedade href do objeto Location.

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

O objeto de localização também possui esses três métodos

1. assign () - Carrega um novo documento.
2. reload () - Recarrega o documento atual.
3. replace () - Substitui o documento atual por um novo

Você pode usar assign () e substituir métodos também para redirecionar para outras páginas como estas

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

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

Como assign () e replace () diferem - A diferença entre o método replace () e o método assign () () é que replace () remove a URL do documento atual do histórico, significa que não é possível usar o botão "voltar" para voltar ao documento original. Portanto, use o método assign () se desejar carregar um novo documento e deseje dar a opção de voltar ao documento original.

Você pode alterar a propriedade href do objeto de localização usando o jQuery também como este

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

E, portanto, você pode redirecionar o usuário para outro URL.

Basicamente, o jQuery é apenas uma estrutura JavaScript e, para fazer algumas coisas como redirecionamento , neste caso, você pode simplesmente usar JavaScript puro; nesse caso, você tem três opções usando o JavaScript vanilla:

1) Usar localização substituir , este irá substituir a história atual da página, significa que não é possível utilizar a volta botão para voltar para a página original.

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

2) Usando a atribuição de localização , isso manterá o histórico para você e, com o uso do botão Voltar, você poderá voltar à página original:

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

3) Recomendo o uso de uma dessas maneiras anteriores, mas essa poderia ser a terceira opção usando JavaScript puro:

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

Você também pode escrever uma função no jQuery para lidar com isso, mas não é recomendado, pois é apenas uma função JavaScript pura de uma linha; também é possível usar todas as funções acima sem window se você já estiver no escopo da janela, por exemplo window.location.replace("http://stackoverflow.com"); poderia serlocation.replace("http://stackoverflow.com");

Também mostro a todos na imagem abaixo:

Deve apenas ser capaz de definir usando window.location.

Exemplo:

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

Aqui está uma postagem anterior sobre o assunto: Como redirecionar para outra página da web?

Antes de começar, o jQuery é uma biblioteca JavaScript usada para manipulação do DOM. Portanto, você não deve usar o jQuery para redirecionar uma página.

Uma citação de Jquery.com:

Embora o jQuery possa ser executado sem grandes problemas nas versões mais antigas do navegador, não testamos ativamente o jQuery neles e geralmente não corrigimos bugs que possam aparecer neles.

Foi encontrado aqui: https://jquery.com/browser-support/

Portanto, o jQuery não é uma solução completa para compatibilidade com versões anteriores.

A solução a seguir, usando JavaScript puro, funciona em todos os navegadores e é padrão há muito tempo, portanto você não precisa de bibliotecas para suporte a vários navegadores.

Esta página será redirecionada para o Google após 3000 milissegundos

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

As opções diferentes são as seguintes:

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"

Ao usar substituir, o botão Voltar não retornará à página de redirecionamento, como se nunca estivesse no histórico. Se você deseja que o usuário possa voltar à página de redirecionamento, use window.location.hrefouwindow.location.assign . Se você usar uma opção que permita ao usuário voltar à página de redirecionamento, lembre-se de que quando você entra na página de redirecionamento, ele o redireciona de volta. Portanto, leve isso em consideração ao escolher uma opção para o seu redirecionamento. Sob condições em que a página está redirecionando apenas quando uma ação é executada pelo usuário, manter a página no histórico do botão voltar ficará bem. Mas se a página redirecionar automaticamente, você deverá usar a opção substituir, para que o usuário possa usar o botão Voltar sem ser forçado a voltar à página que o redirecionamento envia.

Você também pode usar metadados para executar um redirecionamento de página, conforme a seguir.

META Refresh

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

META Localização

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

BASE Hijacking

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

Muitos outros métodos para redirecionar seu cliente desavisado para uma página que ele pode não querer ir podem ser encontrados nesta página (nenhum deles depende do jQuery):

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

Eu também gostaria de salientar que as pessoas não gostam de ser redirecionadas aleatoriamente. Somente redirecione as pessoas quando for absolutamente necessário. Se você começar a redirecionar as pessoas aleatoriamente, elas nunca voltarão ao seu site.

O próximo parágrafo é hipotético:

Você também pode ser denunciado como um site malicioso. Se isso acontecer, quando as pessoas clicarem em um link para o seu site, o navegador dos usuários poderá avisá-las de que seu site é malicioso. O que também pode acontecer é que os mecanismos de pesquisa podem começar a diminuir sua classificação se as pessoas estiverem relatando uma experiência ruim em seu site.

Consulte as Diretrizes para webmasters do Google sobre redirecionamentos: https://support.google.com/webmasters/answer/2721217?hl=pt_BR&ref_topic=6001971

Aqui está uma pequena página divertida que o expulsa da 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>

Se você combinar os exemplos de duas páginas, terá um loop infantil de redirecionamento que garantirá que seu usuário nunca mais queira usar seu site novamente.

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

Você pode fazer isso sem o jQuery como:

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

E se você quiser apenas jQuery, poderá fazê-lo como:

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

Isso funciona com o jQuery:

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

# Redirecionamento de página HTML usando jQuery / JavaScript

Experimente este código de exemplo:

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

Se você deseja fornecer um URL completo como window.location = "www.google.co.in";.

Você precisa colocar esta linha no seu código:

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

Se você não possui jQuery, vá com JavaScript:

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

Pergunta original: "Como redirecionar usando jQuery?", Portanto, a resposta implementa jQuery >> Caso de uso gratuito.

Para apenas redirecionar para uma página com JavaScript:

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

Ou se você precisar de um atraso:

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

O jQuery permite selecionar elementos de uma página da web com facilidade. Você pode encontrar o que quiser em uma página e, em seguida, usar o jQuery para adicionar efeitos especiais, reagir às ações do usuário ou mostrar e ocultar conteúdo dentro ou fora do elemento que você selecionou. Todas essas tarefas começam com o conhecimento de como selecionar um elemento ou 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 alguém escreveu um script / plugin com 10000 linhas de código. Com o jQuery, você pode se conectar a esse código com apenas uma linha ou duas.

Então, a questão é como fazer uma página de redirecionamento, e não como redirecionar para um site?

Você só precisa usar JavaScript para isso. Aqui está um pequeno código que criará uma página de redirecionamento 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 você coloque esse trecho em um redirect/index.htmlarquivo no seu site, você pode usá-lo dessa maneira.

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

E se você acessar esse link, ele o redirecionará automaticamente para o stackoverflow.com .

Link para documentação

E é assim que você cria uma página de redirecionamento simples com JavaScript

Editar:

Há também uma coisa a observar. Eu adicionei window.location.replaceno meu código porque acho que combina com uma página de redirecionamento, mas você deve saber que ao usar window.location.replacee é redirecionado, ao pressionar o botão Voltar no navegador, ele não funcionará. voltará à página de redirecionamento e volte para a página anterior e dê uma olhada nesta pequena demonstração.

Exemplo:

O processo: página inicial da loja => página de redirecionamento para o google => google

Quando no google: google => botão voltar no navegador => armazenar em casa

Portanto, se isso atender às suas necessidades, tudo ficará bem. Se você deseja incluir a página de redirecionamento no histórico do navegador, substitua-o

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

com

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

Na sua função de clique, basta adicionar:

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

Tente o seguinte:

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

Fragmento de código do exemplo .

jQuery não é necessário. Você consegue fazer isso:

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

É fácil assim!

A melhor maneira de iniciar uma solicitação HTTP é com document.loacation.href.replace('URL').

Primeiro escreva corretamente. Você deseja navegar em um aplicativo para outro link do seu aplicativo para outro link. Aqui está o código:

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

E se você quiser navegar pelas páginas do seu aplicativo, também tenho código, se desejar.

Você pode redirecionar no jQuery assim:

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

Em JavaScript e jQuery, podemos usar o seguinte código para redirecionar uma página para outra página:

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, não me mate, isso é uma piada. É uma piada. Isso é uma piada.

Isso "forneceu uma resposta para a pergunta", no sentido de solicitar uma solução "usando jQuery", que neste caso implica forçá-la de alguma forma à equação.

Aparentemente, Ferrybig precisa da piada explicada (ainda brincando, tenho certeza que há opções limitadas no formulário de revisão), portanto, sem mais delongas:

Outras respostas estão usando jQuery's attr()nos objetos locationou windowdesnecessariamente.

Essa resposta também a abusa, mas de uma maneira mais ridícula. Em vez de usá-lo para definir o local, isso é usado attr()para recuperar uma função que define o local.

A função é nomeada jQueryCodemesmo que não exista nada jQuery, e chamar uma função somethingCodeé simplesmente horrível, especialmente quando algo não é sequer um idioma.

Os "85 bytes" são uma referência ao Code Golf. Obviamente, o golfe não é algo que você deve fazer fora do código de golfe e, além disso, essa resposta claramente não é realmente um jogo de golfe.

Basicamente, encolher.

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: $ (local)

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

Método 2: Função Reutilizável

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

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

Aqui está um redirecionamento de atraso de tempo. Você pode definir o tempo de atraso para o que quiser:

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

Existem três maneiras principais de fazer isso,

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

e...

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

O último é o melhor, para um redirecionamento tradicional, porque ele não salva a página para a qual você foi antes de ser redirecionado no seu histórico de pesquisa. No entanto, se você quiser apenas abrir uma guia com JavaScript, poderá usar qualquer uma das opções acima. 1

EDIT: O windowprefixo é opcional.