Como criar um link HTML de volta?


286

Qual é a maneira mais simples de criar uma <a>tag vinculada à página da Web anterior? Basicamente, um botão voltar simulado, mas um hiperlink real. Somente tecnologias do lado do cliente, por favor.

Editar
Procurando soluções que tenham o benefício de mostrar o URL da página em que você está prestes a clicar ao passar o mouse, como um hiperlink estático normal. Prefiro não ter o usuário olhando history.go(-1)ao passar o mouse em um hiperlink. O melhor que encontrei até agora é:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

É document.referrerconfiável? Seguro entre navegadores? Ficarei feliz em aceitar uma resposta melhor.


2
O JavaScript é uma tecnologia do lado do cliente, alguns clientes (como eu) optam por desativá-lo (por padrão). Esse é o poder do cliente! : D Mas sim, não há como o HTML, por si só, determinar o que era a página anterior.
— animuson

Respostas:


513

E de outra maneira:

<a href="javascript:history.back()">Go Back</a>


9
E para um botão:<button type="button" onclick="javascript:history.back()">Back</button>
— Leo

1
Uma desvantagem dessa abordagem é que os recursos padrão do navegador, como "passe o mouse para ver o URL" e clique com o botão direito do mouse -> copiar link, serão quebrados.
— Vivek Maharajh

Eu acho que é mais sobre semântica. Um "botão" de retorno é mais adequado que um "link" de retorno. Ambas as opções são ótimas e ambas estão corretas à sua maneira.
— Jaspreet Singh

111

Esta solução tem o benefício de mostrar o URL da página vinculada ao passar o mouse, como a maioria dos navegadores faz por padrão, em vez de history.go(-1)ou semelhante:

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

9
Isso também tem o benefício de cobrir o caso em que a página de referência foi aberta com um target="_blank"atributo no link, o que history.go(-1)não acontece.
— precisa saber é o seguinte

4
Esta solução perde a parte do link a seguir #, o 'javascript: history.back ()' funciona corretamente.
— Liviu

15
A desvantagem desta solução é que você não poderá voltar mais de uma página. Exemplo; navegue até as páginas a, b, c, d - pressione o botão voltar repetidamente c, d, c, d, c, d. Compare isso com .history.back () a, b, c, d Pressione o botão repetidamente D, C, b, a
— atreeon

Como posso fazer isso para que no caso não há nenhuma página para trás, em seguida, redirecionar para uma URL fixahistory.back() || "myaction/mycontroller"
— ninho

@orangesherbert Abordei isso em uma nova resposta (que também satisfaz o requisito "show URL".
— #

44

A maneira mais fácil é usar history.go(-1);

Tente o seguinte:

<a href="#" onclick="history.go(-1)">Go Back</a>


41

você pode tentar javascript

<A HREF="javascript:history.go(-1)">

consulte Botão Voltar do JavaScript

EDITAR

para exibir o URL de referência http://www.javascriptkit.com/javatutors/crossmenu2.shtml

e envie o elemento a si próprio na conversão, conforme a seguir

function showtext(thetext) {
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
}
 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

verifique jsfiddle


você pode explicar essa última edição? Eu só quero um link normal, como mostra na parte inferior da maioria dos navegadores.
— paislee

como todo navegador mostra para todos, você não precisa fazer nada, mas se quiser mostrá-lo em sua própria div, poderá especificar uma div tabledescriptionem qualquer lugar da página para mostrar um link sobre o mouse sobre a marca de âncora
— Hemant Metalia

40

Esta solução oferece o melhor dos dois mundos

  • Os usuários passam o mouse sobre o link para ver o URL
  • Os usuários não acabam com uma pilha traseira corrompida

Mais detalhes nos comentários de código abaixo.

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() {
  history.back();
  return false;
}
<a id="back-link">back</a>


Resposta incrível. Eu uso isso em quase todos os meus projetos knockout no contexto de ligação personalizada.
— Pimbrouwers

Ótima resposta! Eu tive que adicionar return false;à função onclick no Chrome para impedir que ela adicionasse a página atual ao histórico do navegador.
— Marshall Morrise

25

Para voltar à página anterior usando o Anchor Tag <a>, abaixo estão 2 métodos de trabalho e, dentre eles, o primeiro é mais rápido e tem uma grande vantagem em voltar à página anterior.

Eu tentei os dois métodos.

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

O método acima (1) funciona muito bem se você clicou em um link e abriu um link em uma nova guia na janela atual do navegador.

2)

<a href="javascript:history.back()">Go Back</a>

O método acima (2) só funciona bem se você clicou em um link e abriu o link em uma guia Atual na janela atual do navegador.

Não funcionará se você tiver um link aberto na Nova guia. Aqui history.back()não funcionará se o link for aberto na nova guia do navegador da web.


18

Um link para trás é um link que move o navegador para trás uma página, como se o usuário tivesse clicado no botão Voltar disponível na maioria dos navegadores. Os links de volta usam JavaScript. Ele move o navegador de volta uma página se o seu navegador suportar JavaScript (o que é compatível) e se o window.historyobjeto for necessário para os links de volta.

Maneiras simples são

<a href="#" onClick="history.go(-1)">Go Back</a>

OU:

function goBack() {
  window.history.back()
}
<a href="#" onclick="goBack()" />Go Back</a>

De um modo geral, um link para trás não é necessário ... o botão Voltar geralmente é bastante adequado, e geralmente você também pode simplesmente vincular a página anterior em seu site. No entanto, às vezes você pode querer fornecer um link para uma das várias páginas "anteriores", e é aí que um link para trás é útil. Então, refiro-lhe o tutorial abaixo, se você deseja fazer de maneira mais avançada:

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html


2
Ao contrário da solução mais votada, isso mantém a posição de rolagem que o usuário tinha.
— Ketri 3/09/2013

@Ketri, você pode fornecer suporte para a declaração? eles devem ser idênticos: w3schools.com/jsref/met_his_back.asp
— Faro

8

tente isso

<a href="javascript:history.go(-1)"> Go Back </a>


1

Você também pode usar history.back()ao lado document.write()para mostrar o link apenas quando houver realmente um lugar para voltar:

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

document.writesobrescreve tudo na página. Por que você nunca usar isso?
— jpaugh

Você deve executar esse script enquanto a página ainda está carregando.
— Leonid Vasilev

0

A melhor maneira de usar um botão é

<input type= 'button' onclick='javascript:history.back();return false;' value='Back'>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.