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:
<script>
document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>
Is document.referrer
reliable? Cross-browser safe? I'll be happy to accept a better answer.
Solution 1:
And another way:
<a href="javascript:history.back()">Go Back</a>
Solution 2:
This solution has the benefit of showing the URL of the linked-to page on hover, as most browsers do by default, instead of history.go(-1)
or similar:
<script>
document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>
Solution 3:
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.
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>