Redirecionar de uma página HTML

1580

É possível configurar uma página HTML básica para redirecionar para outra página em carga?

html redirect xhtml meta html-head chobo
fonte
28
Para seguir padrões modernos da web e fornecer a funcionalidade de cross-browser, eu prefiro usar este avançado gerador de redirecionamento
Patartics Milán
1
Use .htaccess ou equivalente ao IIS para fazer um redirecionamento do servidor. Dessa forma, mesmo se sua página física desaparecer, o redirecionamento ainda funcionará.
Flith 13/11
1
insider.zone/tools/client-side-url-redirect-generator É uma ferramenta pequena e agradável que garante compatibilidade.
mackycheese21
2
Essa ferramenta insider.zone fez com que meus redirecionamentos fossem minúsculos, causando 404s. Além disso, não há como entrar em contato com quem criou a página.
Dan Jacobson

Respostas:

2152

Tente usar:

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

Nota: Coloque-o na seção principal.

Além disso, para navegadores mais antigos, se você adicionar um link rápido, caso ele não seja atualizado corretamente:

<p><a href="http://example.com/">Redirect</a></p>

Aparecerá como

Redirecionar

Isso ainda permitirá que você chegue aonde está indo com um clique adicional.

Valerij
fonte
151
O uso da atualização meta é desencorajado pelo World Wide Web Consortium (W3C). Ref: en.wikipedia.org/wiki/Meta_refresh . Portanto, é recomendável usar o redirecionamento do servidor. Os redirecionamentos de JavaScript podem não funcionar em todos os celulares, pois o JavaScript pode estar desativado.
NinethSense
61
Para sua informação, os 0meios para atualizar após 0 segundos. Você pode dar ao usuário mais tempo para saber o que está acontecendo.
Dennis
5
@ Paul Draper, que depende do servidor que está executando
Gal Margalit
9
Eu adicionei o fechamento da tag para respeitar as especificações XHTML5.
ZenLulz
98
O comentário do @ NinethSense faz a meta refresh parecer um redirecionamento de JavaScript. A atualização meta não é JS e ainda funcionará quando o JS estiver desativado.
Druska
1104

Eu usaria ambos código meta e JavaScript e teria um link por precaução.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

Para garantir a integridade, acho que a melhor maneira, se possível, é usar os redirecionamentos do servidor; portanto, envie um código de status 301 . Isso é fácil através de .htaccessarquivos usando o Apache ou através de vários plugins usando o WordPress . Estou certo de que também existem plugins para todos os principais sistemas de gerenciamento de conteúdo. Além disso, o cPanel possui uma configuração muito fácil para redirecionamentos 301, se você o tiver instalado no servidor.

Billy Moon
fonte
12
Esta página de redirecionamento pode ser muito mais conciso com HTML5: pastebin.com/2qmfUZMk (que funciona em todos os navegadores, e passa Validação W3C)
enyo
9
@enyo Eu não sou um grande fã de deixar cair as bodytags e coisas do gênero. Talvez valide e talvez funcione em navegadores comuns. Estou certo de que há alguns casos adicionais que causam problemas e o benefício parece pequeno.
Billy Lua
9
@Fricker, porque eles podem não estar clicando. Eles podem estar controlando via voz, tocando ou navegando de alguma maneira desconhecida. É uma diretriz de acessibilidade seguir padrões para controles, como usar o atributo HTML A padrão para um link, pensar nele e comunicá-lo como um link, e não prescrever como alguém deve interagir com ele. Além disso, click herenão é recomendável ter um link, pois o leitor de tela será mais difícil de navegar. Os links devem estar no texto que descreve o destino, para que o usuário saiba onde ele chegará antes de segui-lo e, no entanto, ele interage com ele.
Billy Moon
2
@ BillyMoon, na verdade, o significado de "clique" já foi sobrecarregado para incluir todos esses significados também. "click" vai dar certo.
Pacerier
2
@BillyMoon sob que circunstâncias ocasionais o navegador ignora a atualização meta de valor 0? Obrigado!
Margalit Gal
125

Javascript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

Meta tag

<meta http-equiv="refresh" content="0;url=http://example.com">
amit_g
fonte
40

Eu também adicionaria um link canônico para ajudar seu pessoal de SEO :

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
lrkwz
fonte
3
Você usaria um link canônico além de um redirecionamento? en.wikipedia.org/wiki/Canonical_link_element diz que o Google prefere o uso de um redirecionamento em vez de um link canônico.
Larsh
1
@larsH Então, o que é mais importante para o SEO, é o link de redirecionamento ou a página de destino final?
Chakotay
@Chakotay See: Quando você deve escolher o redirecionamento Canonical vs. 301?
Marc.2377
28

A seguinte metatag, colocada entre a parte interna da cabeça, instruirá o navegador a redirecionar:

<meta http-equiv="Refresh" content="seconds; url=URL">

Substitua segundos pelo número de segundos a aguardar antes do redirecionamento e substitua o URL pelo URL para o qual você deseja redirecionar.

Como alternativa, você pode redirecionar com JavaScript. Coloque isso dentro de uma tag de script em qualquer lugar da página:

window.location = "URL"
Peter Olson
fonte
28

Este é um resumo de todas as respostas anteriores, além de uma solução adicional usando o HTTP Refresh Header via .htaccess

1. Cabeçalho de Atualização HTTP

Primeiro de tudo, você pode usar .htaccess para definir um cabeçalho de atualização como este

Header set Refresh "3"

Este é o equivalente "estático" do uso da header()função no PHP

header("refresh: 3;");

Observe que esta solução não é suportada por todos os navegadores.

2. JavaScript

Com um URL alternativo :

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

Sem um URL alternativo:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

Via jQuery:

<script>
    window.location.reload(true);
</script>

3. Atualização Meta

Você pode usar a atualização meta quando dependências no JavaScript e nos cabeçalhos de redirecionamento forem indesejados

Com um URL alternativo:

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">

Sem um URL alternativo:

<meta http-equiv="Refresh" content="3">

Usando <noscript>:

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

Opcionalmente

Conforme recomendado por Billy Moon, você pode fornecer um link de atualização caso algo dê errado:

Se você não for redirecionado automaticamente: <a href='http://example.com/alternat_url.html'>Click here</a>

Recursos

RafaSashi
fonte
12
O exemplo "Via jQuery" não usa nenhum jQuery.
Justin Johnson
2
Não ligue setTimeoutcom uma corda. Passe uma função em seu lugar.
Oriol 28/11
"HTTP Refresh Header via .htaccess" - por que é relevante em questão perguntar sobre o redirecionamento da página HTML?
reduzindo a atividade
26

Seria melhor configurar um redirecionamento 301 . Consulte o artigo 301 das Ferramentas para webmasters do Google redireciona .

Alex K
fonte
13
A pergunta pede especificamente uma página .html básica. Eu acho que o Asker não pode modificar .htaccess ou similar (por exemplo, usando o Github Pages ou hospedagem limitada semelhante). 301 não é factível em tais casos
Nicolas Raoul
26

Se você deseja seguir os padrões da web modernos, evite meta-redirecionamentos HTML simples. Se você não conseguir criar o código do lado do servidor, escolha o redirecionamento JavaScript .

Para oferecer suporte a navegadores desativados em JavaScript, adicione uma linha de redirecionamento de HTML a um noscriptelemento. O noscriptmeta redirecionamento aninhado combinado com ocanonical tag também ajudará na classificação do seu mecanismo de pesquisa.

Se você deseja evitar loops de redirecionamento, use o comando location.replace() função JavaScript.

Um código de redirecionamento de URL do lado do cliente adequado é semelhante a este (com um Internet Explorer 8 e correção mais baixa e sem demora):

<!-- 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://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.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 -->
Patartics Milán
fonte
2
O site w3.org/TR/WCAG10-HTML-TECHS/#meta-element inclui detalhes sobre por que <meta http-equiv="refresh"foi reprovado pelo W3C.
Daxelrod
Os argumentos que o w3c fornece contra redirecionamentos HTML também se aplicam aos redirecionamentos Javascript. Além disso, os redirecionamentos Javascript exigem o Javascript ativado, ao contrário dos redirecionamentos HTML. Portanto, os redirecionamentos HTML são estritamente melhores que os redirecionamentos Javascript nos casos em que é possível usar os dois.
Max
17

Você pode usar um "redirecionamento" META :

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

ou redirecionamento JavaScript (observe que nem todos os usuários têm o JavaScript ativado, portanto, sempre prepare uma solução de backup para eles)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

Mas prefiro usar o mod_rewrite , se você tiver a opção.

Czechnology
fonte
5
mod_rewrite (apenas) se aplica ao Apache.
Paul Draper
1
Em relação ao Apache: Por que mod_rewrite e não uma diretiva de redirecionamento simples, sem um módulo extra?
Vog #
14

Assim que a página é carregada, a initfunção é acionada e a página é redirecionada:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>
kkk
fonte
10

Coloque o seguinte código entre as marcas <HEAD> e </HEAD> do seu código HTML:

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

O código de redirecionamento HTML acima redirecionará seus visitantes para outra página da web instantaneamente. A content="0;pode ser alterado para o número de segundos que você deseja que o navegador espera antes de redirecionamento.

Muhammad Saqib
fonte
9

Coloque o seguinte código na <head>seção:

<meta http-equiv="refresh" content="0; url=http://address/">
Sebi
fonte
9

Encontrei um problema ao trabalhar com um aplicativo jQuery Mobile , onde, em alguns casos, minha tag de cabeçalho Meta não conseguia um redirecionamento corretamente (o jQuery Mobile não lê automaticamente os cabeçalhos de cada página, portanto, colocar o JavaScript também é ineficaz, a menos que o envolva complexidade). Eu achei a solução mais fácil nesse caso foi colocar o redirecionamento JavaScript diretamente no corpo do documento, da seguinte maneira:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

Isso parece funcionar em todos os casos para mim.

escocês
fonte
8

A maneira simples que funciona para todos os tipos de páginas é apenas adicionar uma metatag na cabeça:

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>
P. BANERJEE
fonte
7

Você deve usar JavaScript. Coloque o seguinte código em suas tags de cabeçalho:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
kriscross07
fonte
7

Você pode redirecionar automaticamente pelo código de status HTTP 301 ou 302.

Para PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
Vô Vị
fonte
6
Isso não é um redirecionamento de uma página HTML.
Bugmenot123 #
7

Eu uso um script que redireciona o usuário de index.html para o URL relativo da Página de login

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>
Zolfaghari
fonte
1
O URL de redirecionamento no método acima pode ser relativo. por exemplo: você deseja redirecionar para a página de login ou qualquer página relativa index.html na raiz do site. não precisa saber seu nome de domínio. mas quando você define window.location.href = "xxx"; você deve saber o nome de domínio.
Zolfaghari 12/08
6

Apenas para uma boa medida:

<?php
header("Location: [email protected]", TRUE, 303);
exit;
?>

Verifique se não há ecos acima do script, caso contrário ele será ignorado. http://php.net/manual/en/function.header.php

Edward
fonte
9
A pergunta pede especificamente uma página .html básica. Eu acho que o Asker não pode modificar .htaccess ou similar (por exemplo, usando o Github Pages ou hospedagem limitada semelhante). O PHP não está disponível nesses casos.
Nicolas Raoul
Eu consideraria algo gerado pelo PHP (processador de pré-hipertexto) uma "página HTML básica". Em nenhum lugar da questão ele mencionou um tipo de arquivo.
20918 Edward Edward
6

Basta usar o evento onload da tag body:

<body onload="window.location = 'http://example.com/'">
pat capozzi
fonte
5

Motor de barbear por um atraso de 5 segundos:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">
JoshYates1980
fonte
Isso não é um redirecionamento de uma página HTML.
reduzindo a atividade
5 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>
PoM
fonte
4

Você não precisa de nenhum código JavaScript para isso. Escreva isso na <head>seção da página HTML:

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

Assim que a página carregar em 0 segundos, você poderá acessar sua página.

Yash Jain
fonte
1
este já está coberto nas aceitei resposta & top comentários - considere editar a resposta do que postar uma duplicata de um
ROZZA
3

Tanto quanto eu os entendo, todos os métodos que vi até agora para esta pergunta parecem adicionar o local antigo à história. Para redirecionar a página, mas não tenho o local antigo no histórico, eu uso o replacemétodo:

<script>
    window.location.replace("http://example.com");
</script>
Paul Ogilvie
fonte
2

Esta é uma solução de redirecionamento com tudo o que eu queria, mas não consegui encontrar em um bom snippet limpo para cortar e colar.

Este trecho tem várias vantagens:

  • permite capturar e manter todos os parâmetros de consulta que as pessoas têm em seus URLs
  • torna o link desnecessário para evitar cache indesejado
  • permite que você informe aos usuários os nomes antigos e novos dos sites
  • mostra uma contagem regressiva configurável
  • pode ser usado para redirecionamentos de link direto como retém parâmetros

Como usar:

Se você migrou um site inteiro, no servidor antigo, pare o site original e crie outro com esse arquivo como o arquivo index.html padrão na pasta raiz. Edite as configurações do site para que qualquer erro 404 seja redirecionado para esta página index.html. Isso captura qualquer pessoa que acessa o site antigo com um link em uma página de nível inferior, etc.

Agora vá para a tag de script de abertura e edite os endereços da web do site antigo e do novo site e altere o valor de segundos conforme necessário.

Salve e inicie seu site. Trabalho feito - hora de tomar um café.

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>
Expandir snippet

Wombat vencido
fonte
1

Redirecione usando JavaScript, <noscript>caso JS esteja desativado.

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
Aryan Beezadhur
fonte
0

Use este código:

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

Por favor, preste atenção: coloque-o na etiqueta da cabeça.

AmerllicA
fonte
Não sei por que minha resposta diminuiu duas vezes? ele funciona corretamente
AmerllicA
A mesma solução postada por você já foi postada por vários usuários anteriormente.
Rahul Shah
0

Você pode fazer isso em javascript:

location = "url";
GameMaster1928
fonte
0

Você pode usar isso

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

mgcarpizo
fonte