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.