Wie erstelle ich einen HTML-Backlink?


286

Was ist der einfachste Weg, um ein <a>Tag zu erstellen , das auf die vorherige Webseite verweist? Grundsätzlich eine simulierte Zurück-Schaltfläche, aber ein tatsächlicher Hyperlink. Bitte nur clientseitige Technologien.

Bearbeiten
Suchen Sie nach Lösungen, bei denen die URL der Seite angezeigt wird, auf die Sie beim Bewegen des Mauszeigers klicken möchten, z. B. nach einem normalen statischen Hyperlink. Ich möchte den Benutzer lieber nicht ansehen lassen, history.go(-1)wenn er über einem Hyperlink schwebt. Das Beste, was ich bisher gefunden habe, ist:

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

Ist document.referrerzuverlässig? Browserübergreifend sicher? Ich werde gerne eine bessere Antwort akzeptieren.


2
JavaScript ist eine clientseitige Technologie. Einige Clients (wie ich) deaktivieren sie einfach (standardmäßig). Das ist die Macht des Kunden! : D Aber ja, es gibt keine Möglichkeit für HTML, allein zu bestimmen, was die vorherige Seite war.
Animuson

Antworten:


513

Und noch anders:

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


9
Und für einen Knopf:<button type="button" onclick="javascript:history.back()">Back</button>
Leo

1
Ein Nachteil dieses Ansatzes ist, dass Standard-Browserfunktionen wie "Hover, um URL zu sehen" und Rechtsklick -> Link kopieren unterbrochen werden.
Vivek Maharajh

Ich denke, es geht mehr um Semantik. Ein Zurück-Button ist passender als ein Zurück-Link. Beide Optionen sind großartig und beide Optionen sind auf ihre eigene Weise korrekt.
Jaspreet Singh

111

Diese Lösung hat den Vorteil, dass die URL der verknüpften Seite beim Hover angezeigt wird, wie dies bei den meisten Browsern standardmäßig der Fall ist, anstatt history.go(-1)oder ähnlich:

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

9
Dies hat auch den Vorteil, dass der Fall abgedeckt wird, dass die verweisende Seite mit einem target="_blank"Attribut auf dem Link geöffnet wurde , was history.go(-1)nicht der Fall ist.
Chris Krycho

4
Diese Lösung verliert den Link-Teil nach #, das 'Javascript: history.back ()' funktioniert korrekt.
Liviu

15
Der Nachteil dieser Lösung ist, dass Sie nicht mehr als eine Seite zurückblättern können. Beispiel; Navigieren Sie zu den Seiten a, b, c, d - drücken Sie wiederholt die Zurück-Taste c, d, c, d, c, d. Vergleichen Sie dies mit .history.back () a, b, c, d Drücken Sie wiederholt die Zurück-Taste d, c, b, a
atreeon

Wie kann ich es so machen, dass für den Fall, dass es keine Rückseite gibt, dann zu einer festen URL umleitenhistory.back() || "myaction/mycontroller"
Nest

@ Orangesherbert Ich habe dies in einer neuen Antwort angesprochen (die auch die Anforderung "URL
anzeigen

44

Der einfachste Weg ist zu verwenden history.go(-1);

Versuche dies:

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


41

Sie können Javascript versuchen

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

Siehe JavaScript-Zurück-Schaltfläche

BEARBEITEN

um die URL von http://www.javascriptkit.com/javatutors/crossmenu2.shtml anzuzeigen

und senden Sie das Element a selbst in onmouseover wie folgt

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>

Überprüfen Sie jsfiddle


Kannst du die letzte Änderung erklären? Ich möchte nur einen normalen Link, wie er unten in den meisten Browsern angezeigt wird.
Paislee

Wie alle Browser für alle anzeigen, müssen Sie nichts tun, aber wenn Sie es in Ihrem eigenen Div tabledescription
anzeigen

40

Diese Lösung bietet Ihnen das Beste aus beiden Welten

  • Benutzer können mit der Maus über den Link fahren, um die URL anzuzeigen
  • Benutzer haben keinen beschädigten Backstack

Weitere Details in den Codekommentaren unten.

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>


Tolle Antwort. Ich verwende dies in fast allen meiner Knockout-Projekte im Rahmen der benutzerdefinierten Bindung.
Pimbrouwers

Gute Antwort! Ich musste return false;die Onclick-Funktion in Chrome erweitern, um zu verhindern, dass die aktuelle Seite zum Browserverlauf hinzugefügt wird.
Marshall Morrise

25

Für Anker gehen zurück Tag zur vorherigen Seite mit <a>, sind unter 2 Arbeitsmethoden und aus ihnen 1. eine ist schneller und haben einen großen Vorteil in zurück zur vorherigen Seite.

Ich habe beide Methoden ausprobiert.

1)

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

Die obige Methode (1) funktioniert hervorragend, wenn Sie auf einen Link geklickt und den Link in einem neuen Tab im aktuellen Browserfenster geöffnet haben.

2)

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

Die obige Methode (2) funktioniert nur, wenn Sie auf einen Link geklickt und den Link in einer aktuellen Registerkarte im aktuellen Browserfenster geöffnet haben.

Es funktioniert nicht, wenn Sie einen offenen Link in der neuen Registerkarte haben. Dies history.back()funktioniert nicht, wenn der Link im neuen Tab des Webbrowsers geöffnet wird.


18

Ein Backlink ist ein Link, der den Browser um eine Seite rückwärts bewegt, als hätte der Benutzer auf die in den meisten Browsern verfügbare Schaltfläche Zurück geklickt. Backlinks verwenden JavaScript. Der Browser wird um eine Seite zurückgeschoben, wenn Ihr Browser JavaScript unterstützt (was er tut) und wenn er das window.historyObjekt unterstützt , das für Backlinks erforderlich ist.

Einfache Wege sind

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

ODER:

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

Im Allgemeinen ist ein Backlink nicht erforderlich. Die Schaltfläche Zurück reicht normalerweise recht gut aus, und normalerweise können Sie auch einfach auf die vorherige Seite Ihrer Site verlinken. Manchmal möchten Sie jedoch möglicherweise einen Link zurück zu einer von mehreren "vorherigen" Seiten bereitstellen, und hier ist ein Backlink nützlich. Daher verweise ich Sie auf das folgende Tutorial, wenn Sie dies auf fortgeschrittenere Weise tun möchten:

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


2
Im Gegensatz zur am häufigsten gewählten Lösung wird hierdurch die Bildlaufposition des Benutzers beibehalten.
Ketri

@Ketri können Sie die Aussage unterstützen? Sie sollten identisch sein: w3schools.com/jsref/met_his_back.asp
FarO

8

Versuche dies

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


1

Sie können history.back()neben auch verwenden document.write(), um Links nur dann anzuzeigen, wenn es tatsächlich einen Ort gibt, zu dem Sie zurückkehren können:

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

document.writeüberschreibt alles auf der Seite. Warum würdest du das jemals benutzen?
Jpaugh

Sie müssen dieses Skript ausführen, während die Seite noch geladen wird.
Leonid Vasilev

0

Der beste Weg mit einer Taste ist

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.