A good[ish] website
Web development blog, loads of UI and JavaScript topics
Some users ignore the back button, maybe all of us every now and then. Sometimes a big and juicy BACK button gives you a nice "I’m not lost after all" feel.
You could use an anchor and tun JavaScript in the href attribute:
<a href="javascript: history.back()">Go back</a>
But that’s pretty archaic. You could use a button add an onclick
event listener and then use the history API to go back to the previous page:
<button onclick="window.history.back()">Go back</button>
But that’s pretty obtrusive, it won’t work if JavaScript is disabled, and the button still sits there doing nothing. This might, or might not be a problem for you.
We need a place to put the back button, just an empty div in this example case:
<div id="wrap"></div>
Then the following JavaScript will create the button and add the click listener to it:
// Grab the wrap element
const wrap = document.getElementById('wrap')
// Create the element
const backButton = document.createElement('button')
// Create the content
const backContent = document.createTextNode('Go back')
// Put the content into the button
backButton.appendChild(backContent)
// Add className to the button (optional)
backButton.classList.add('my-back-button')
// Put the button into the DOM
wrap.appendChild(backButton)
// Add the click listener to the button
backButton.addEventListener('click', () => window.history.back())
Making elements with vanilla JavaScript is kind of verbose.
You can add the whole button with jQuery in this case, then you only have it if JS is enables:
jQuery(document).ready(function () {
$('.back-button').html(
'<button onclick="window.history.back()">Go back</button>'
)
})
Now it’s there only if the user has JS enabled.
Why not do it server side, works in every case. Here is a PHP solution using the HTTP_REFERER
:
$go_back = htmlspecialchars($_SERVER['HTTP_REFERER']);
echo "<a href='$go_back'>Go Back</a>";
But, what if the user comes from a search engine or from a link and gets thrown of your site with the back button? We can check if the $go_back
variable contains your site name:
$go_back = htmlspecialchars($_SERVER['HTTP_REFERER']);
// Has your site name in it
if (preg_match('/clubmate.fi/', $go_back)) {
echo "<a href=" . $go_back . ">Go Back with PHP, only your site</a>";
} else {
// Go home instead
echo "<a href='http://clubmate.fi'>Go Back home</a>";
}
Remember that the code after the else
doesn’t take the user "back", but to home, it’s good practice to call things exactly what they do.
Here’s a simple function that used on WordPress site:
/**
* Returns a URL to the page where user was before this page
* @param string $domain The sites domain name
* @param string $exeption_path The path to go to if not referer is not your site
* @return string URL string
*/
function pps_back_href($domain, $exeption_path) {
// Get the referer, aka where user comes
$referer = htmlspecialchars($_SERVER['HTTP_REFERER']);
// Regex pattern
$match_pattern = "/$domain/";
// Has your site name in it
if (preg_match($match_pattern, $referer)) {
return $referer;
} else {
// Where to go if the referer is not from your domain
return $domain.'/'.$exeption_path;
}
}
Then use it like:
<a href="<?php pps_back_href(get_home_url(), get_post_type()) ?>">
← Back to list
</a>
If the referrer is not your site, then it takes you back to the custom post type archive page.
Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.