Como faço para redirect para outra página da web?

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

Um não redireciona simplesmente usando jQuery

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

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

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

Se você quiser 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"; 

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

Padrão “vanilla” JavaScript maneira de redirect uma página:

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


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


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

Abaixo, vamos implementar uma alternativa para o IE8 e menor, para que não percamos o HTTP_REFERER. Caso contrário, você quase sempre pode simplesmente usar window.location.href .

Testar contra HTTP_REFERER (colagem de URL, session, etc.) pode ser útil para dizer se uma solicitação é legítima. ( Observação: também há maneiras de contornar / falsificar esses referenciadores, conforme observado pelo link de droop nos comentários)


Solução de teste simples entre navegadores (alternativa a window.location.href para o 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; } } 

Usar:

 // 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 você está tentando fazer. Se você está tentando gerar dados paginados, há algumas opções em como você faz isso. Você pode gerar links separados para cada página que você deseja obter diretamente.

 1 2 3 ... 

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

Se você quiser que os dados paginados sejam alterados por meio do AJAX, é aqui que o jQuery entraria. O que você faria é include um manipulador de cliques em cada uma das tags de âncora correspondentes a uma página diferente. Este manipulador de cliques invocaria algum código jQuery que vai e busca a próxima página via AJAX e atualiza a tabela com os novos dados. O exemplo abaixo pressupõe que você tenha um serviço da Web que retorne os novos dados da 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 }); }); 

Eu também acho que location.replace(URL) é a melhor maneira, mas se você quiser notificar os motores de busca sobre o seu redirecionamento (eles não analisam o código JavaScript para ver o redirecionamento) você deve adicionar o meta rel="canonical" tag para o seu site.

Adicionando uma seção noscript com uma meta tag de atualização HTML, também é uma boa solução. Eu sugiro que você use esta ferramenta de redirecionamento de JavaScript para criar redirecionamentos. Ele também tem suporte do Internet Explorer para passar o referenciador HTTP.

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

            

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

 window.location = window.location.host 

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

Você pode explorar essa janela ou object window.location apenas colocando essas palavras no Console do Chrome ou no Console do Firebug .

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

 var currentLocation = window.location; 

Estrutura Básica de um URL

 //:/ 

insira a descrição da imagem aqui

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

  2. hostname – nome do host especifica o host que possui o recurso. Por exemplo, http://www.stackoverflow.com. Um servidor fornece serviços usando o nome do host.

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

  4. pathname – O caminho fornece informações sobre o recurso específico dentro do host que o Web client deseja acessar. Por exemplo, stackoverflow.com/index.html.

  5. consulta – Uma sequência de consulta segue o componente do caminho e fornece uma sequência de informações que o recurso pode utilizar para algum propósito (por exemplo, como parâmetros para uma pesquisa ou como dados a serem processados).

  6. hash – A parte da âncora de um URL, inclui o sinal de hash (#).

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

  1. hash – configura ou retorna a parte de âncora de um URL.
  2. host -Seta ou retorna o nome do host e a porta de um URL.
  3. hostname -Sets ou retorna o nome do host de um URL.
  4. href – configura ou retorna o URL inteiro.
  5. nome do caminho -Seta ou retorna o nome do caminho de um URL.
  6. port – configura ou retorna o número da porta que o servidor usa para um URL.
  7. protocolo – Configura ou retorna o protocolo de uma URL.
  8. pesquisa -Set ou retorna a parte da consulta de um URL

Agora, se você quiser alterar uma página ou redirect o usuário para alguma outra página, você pode usar a propriedade href do object Location como este

Você pode usar a propriedade href do object Location.

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

Objeto de localização também tem esses três methods

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

Você pode usar os methods assign () e replace também para redirect 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 o URL do documento atual do histórico do documento, o que significa que não é possível usar o botão “voltar” para navegar de volta ao documento original. Portanto, use o método assign () se quiser carregar um novo documento e quiser dar a opção de navegar de volta para o documento original.

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

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

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

Deve apenas ser capaz de definir usando window.location .

Exemplo:

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

Aqui está um post passado sobre o assunto:

Como faço para redirect para outra página da web?

Antes de começar, o jQuery é uma biblioteca JavaScript usada para manipulação de DOM. Então você não deveria estar usando jQuery para um redirecionamento de página.

Uma citação do Jquery.com:

Embora o jQuery possa ser executado sem grandes problemas em versões de navegadores mais antigos, nós não testamos ativamente o jQuery neles e geralmente não corrigimos os erros que podem aparecer neles.

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

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

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

Esta página irá redirect para o Google após 3000 milissegundos

 < !DOCTYPE html>   example   

You will be redirected to google shortly.

Diferentes opções 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 replace, o botão Voltar não voltará para a página de redirecionamento, como se nunca estivesse no histórico. Se você quiser que o usuário possa voltar para a página de redirecionamento, use window.location.href ou window.location.assign . Se você usar uma opção que permita ao usuário voltar para a página de redirecionamento, lembre-se de que, ao entrar na página de redirecionamento, ela será redirecionada. Então, ponha isso em consideração ao escolher uma opção para o seu redirecionamento. Sob condições em que a página está apenas redirecionando quando uma ação é feita pelo usuário, a página no histórico do botão voltar ficará bem. Mas, se o redirecionamento automático da página for usado, você deverá usar replace para que o usuário possa usar o botão Voltar sem ser forçado a voltar para a página que o redirecionamento envia.

Você também pode usar metadados para executar um redirecionamento de página como seguido.

META Refresh

  

META Localização

  

Invasão BASE

  

Muitos outros methods para redirect seu cliente desavisado para uma página que eles podem não querer ir podem ser encontrados nesta página (nenhum deles depende de jQuery):

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

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

A próxima parte é hipotética:

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 do usuário poderá avisá-lo que seu site é malicioso. O que também pode acontecer é que os mecanismos de pesquisa possam começar a perder sua sorting 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 te tira da página.

 < !DOCTYPE html>   Go Away   

Go Away

Se você combinar os dois exemplos de página juntos, você terá um loop infantil de reencaminhamento que garantirá que seu usuário nunca mais desejará usar seu site novamente.

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

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

1) Usando a substituição de local, isso replaceá o histórico atual da página, o que significa que não é possível usar o botão Voltar para retornar à página original.

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

2) Usando a localização atribuída , isso manterá o histórico para você e, usando o botão voltar, você poderá voltar para a página original:

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

3) Eu recomendo usar uma dessas formas anteriores, mas esta poderia ser a terceira opção usando JavaScript puro:

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

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

Também mostro todos eles na imagem abaixo:

location.replace location.assign

Isso funciona com jQuery:

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

Você pode fazer isso sem jQuery como:

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

E se você quiser apenas o jQuery, você pode fazer como:

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

# HTML Page Redirect Usando jQuery / JavaScript

Tente 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ê quiser fornecer uma URL completa como window.location = "www.google.co.in"; .

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

Você só precisa usar JavaScript para isso. Aqui está um pequeno código que irá criar uma página de redirecionamento dynamic.

  

Então, digamos que você acabou de colocar este trecho em um arquivo de redirect/index.html em seu site, você pode usá-lo assim.

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

E se você for para esse link, ele será redirecionado automaticamente para o stackoverflow.com .

Link para documentação

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

Editar:

Há também uma coisa a notar. Eu adicionei window.location.replace no meu código porque eu acho que se adapta a uma página de redirecionamento, mas, você deve saber que ao usar window.location.replace e você for redirecionado, quando você pressiona o botão voltar no seu navegador não vai Voltei para a página de redirecionamento, e vai voltar para a página antes, dê uma olhada nesta pequena coisa de demonstração.

Exemplo:

O processo: armazenar home => redirect página para o google => google

Quando no google: google => botão voltar no navegador => home da loja

Então, se isso atender às suas necessidades, então tudo deve ficar bem. Se você quiser include a página de redirecionamento no histórico do navegador, substitua

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

com

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

Na sua function de clique, basta adicionar:

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

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

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

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

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

***** A PERGUNTA ORIGINAL FOI – “COMO REDIRECIONAR A UTILIZAÇÃO DA JQUERY”, AQUI A RESPOSTA IMPLEMENTA AQUISIÇÃO >> CASO DE USO GRATUITO *****

Para apenas redirect 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 usar o jQuery para adicionar efeitos especiais, reagir a ações do usuário ou mostrar e ocultar conteúdo dentro ou fora do elemento selecionado. Todas essas tarefas começam com o conhecimento de como selecionar um elemento ou um 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 alguém escreveu um script / plugin que é 10000 linhas de código ?! Bem, com jQuery você pode se conectar a este código com apenas uma linha ou duas.

Tente isto:

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

Trecho de código do exemplo .

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

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

É assim tão fácil!

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

Você pode redirect em jQuery assim:

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

Primeiro escreva corretamente. Você deseja navegar em um aplicativo por 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 quiser.

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 

Em JavaScript e jQuery, podemos usar o seguinte código para redirect 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 que pedia uma solução “usando jQuery” que, nesse caso, implica forçá-lo na equação de alguma forma.

Ferrybig aparentemente precisa da piada explicou (ainda brincando, eu tenho certeza que existem opções limitadas no formulário de revisão), então sem mais delongas:

Outras respostas estão usando attr() do jQuery nos objects location ou window desnecessariamente.

Esta resposta também abusa, mas de uma maneira mais ridícula. Em vez de usá-lo para definir o local, isso usa attr() para recuperar uma function que define o local.

A function é chamada de jQueryCode mesmo que não exista nada jQuery sobre isso, e chamar uma function de jQueryCode é simplesmente horrível, especialmente quando o algo não é nem mesmo uma linguagem.

Os “85 bytes” são uma referência ao Code Golf. Golfe obviamente não é algo que você deve fazer fora do golfe de código, e além disso esta resposta é claramente não realmente golfed.

Basicamente, encolher.

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

 < !doctype html>    Your Document Title     
You will be redirected in 8 seconds!

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 salvará a página que você accessu antes de ser redirecionado em 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 prefixo da window é opcional.

Eu só tive que atualizar esse ridículo com outro método jQuery mais novo:

 var url = 'http://www.fiftywaystoleaveyourlocation.com'; $(location).prop('href', url);