[javascript] How to make an HTML back link?

What is the simplest way to create an <a> tag that links to the previous web page? Basically a simulated back button, but an actual hyperlink. Client-side technologies only, please.

Edit
Looking for solutions that have the benefit of showing the URL of the page you're about to click on when hovering, like a normal, static hyperlink. I'd rather not have the user looking at history.go(-1) when hovering on a hyperlink. Best I've found so far is:

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

Is document.referrer reliable? Cross-browser safe? I'll be happy to accept a better answer.

This question is related to javascript html hyperlink

The answer is


<a href="#" onclick="history.back();">Back</a>

you can try javascript

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

refer JavaScript Back Button

EDIT

to display url of refer http://www.javascriptkit.com/javatutors/crossmenu2.shtml

and send the element a itself in onmouseover as follow

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

check jsfiddle


A back link is a link that moves the browser backwards one page, as if the user had clicked the Back button available in most browsers. Back links use JavaScript. It moves the browser back one page if your browser supports JavaScript (which it does) and if it supports the window.history object, which is necessary for back links.

Simple ways are

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

OR:

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

Generally speaking a back link isn't necessary… the Back button usually suffices quite nicely, and usually you can also simply link to the previous page in your site. However, sometimes you might want to provide a link back to one of several "previous" pages, and that's where a back link comes in handy. So I refer you below tutorial if you want to do in more advanced way:

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


try this

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

The best way using a button is

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


You can also use history.back() alongside document.write() to show link only when there is actually somewhere to go back to:

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

For going back to previous page using Anchor Tag <a>, below are 2 working methods and out of them 1st one is faster and have one great advantage in going back to previous page.

I have tried both methods.

1)

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

Above method (1) works great if you have clicked on a link and opened link in a New Tab in current browser window.

2)

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

Above method (2) only works ok if you have clicked on a link and opened link in a Current Tab in current browser window.

It will not work if you have open link in New Tab. Here history.back() will not work if link is opened in New Tab of web browser.


And another way:

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


history.go(-1) doesn't work if you click around in the 2nd domain or if the referrer is empty.

So we have to store the historyCount on arriving to this domain and go back the number of navigations in this side minus 1.


// if referrer is different from this site
if (!document.referrer.includes(window.location.host)) {
  // store current history length
  localStorage.setItem('historyLength', `${history.length}`);
}

// Return to stored referrer on logo click
document.querySelector('header .logo').addEventListener('click', 
  () =>
   history.go(Number(localStorage.getItem('historyLength')) - history.length -1)
);

This solution gives you the best of both worlds

  • Users get to hover over the link to see the URL
  • Users don't end up with a corrupted back-stack

More details in the code comments below.

_x000D_
_x000D_
var element = document.getElementById('back-link');_x000D_
_x000D_
// Provide a standard href to facilitate standard browser features such as _x000D_
//  - Hover to see link_x000D_
//  - Right click and copy link_x000D_
//  - Right click and open in new tab_x000D_
element.setAttribute('href', document.referrer);_x000D_
_x000D_
// We can't let the browser use the above href for navigation. If it does, _x000D_
// the browser will think that it is a regular link, and place the current _x000D_
// page on the browser history, so that if the user clicks "back" again,_x000D_
// it'll actually return to this page. We need to perform a native back to_x000D_
// integrate properly into the browser's history behavior_x000D_
element.onclick = function() {_x000D_
  history.back();_x000D_
  return false;_x000D_
}
_x000D_
<a id="back-link">back</a>
_x000D_
_x000D_
_x000D_


The easiest way is to use history.go(-1);

Try this:

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


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment Wrapping a react-router Link in an html button How to make a hyperlink in telegram without using bots? React onClick and preventDefault() link refresh/redirect? How to put a link on a button with bootstrap? How link to any local file with markdown syntax? link with target="_blank" does not open in new tab in Chrome How to create a link to another PHP page How to determine the current language of a wordpress page when using polylang? How to change link color (Bootstrap) How can I make a clickable link in an NSAttributedString?