JavaScript Back Button
The JavaScript “back()” method can reload content in the browser history list. A styled back button can be used to call the back method. The back method works in all major browsers.
The back method works well for static content such as HTML pages. It is possible to go several pages back through the history list.
This tutorial uses HTML5 but will work with older versions.
- Tools are required:
- Text editor.
- Folder for web server.
- Browser to view output.
Go_Back_1.html File
<!--
Go_Back_1.html
Copyright 2013 edward <http://Ojambo.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<title>Ojambo.com Go Back</title>
<meta charset="utf-8" />
<script type="text/JavaScript">
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<p>Ojambo.com Page One</p>
<p><input type="button" value="Back Once" onclick="goBack()" /></p>
<p><input type="button" value="Back Once" onclick="history.go(-1)" /></p>
<p><input type="button" value="Back Twice" onclick="history.go(-2)" /></p>
<a href="go-back2.html">Page 2</a>
</body>
</html>
Go_Back_2.html File
<!--
Go_Back_2.html
Copyright 2013 edward <http://Ojambo.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<title>Ojambo.com Go Back</title>
<meta charset="utf-8" />
<script type="text/JavaScript">
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<p>Ojambo.com Page Two</p>
<p><input type="button" value="Back Once" onclick="goBack()" /></p>
<p><input type="button" value="Back Once" onclick="history.go(-1)" /></p>
<p><input type="button" value="Back Twice" onclick="history.go(-2)" /></p>
<a href="go-back1.html">Page 1</a>
<a href="go-back3.html">Page 3</a>
</body>
</html>
Go_Back_3.html File
<!--
Go_Back_3.html
Copyright 2013 edward <http://Ojambo.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<title>Ojambo.com Go Back</title>
<meta charset="utf-8" />
<script type="text/JavaScript">
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<p>Ojambo.com Page Three</p>
<p><input type="button" value="Back Once" onclick="goBack()" /></p>
<p><input type="button" value="Back Once" onclick="history.go(-1)" /></p>
<p><input type="button" value="Back Twice" onclick="history.go(-2)" /></p>
<a href="go-back1.html">Page 1</a>
<a href="go-back2.html">Page 2</a>
</body>
The first input tag utilizes the custom JavaScript function “goBack” which retrieves the last visited page. The second input tag calls the JavaScript method directly for going back one page. The third input tag goes back two pages; hence the minus two (-2).
Sometimes the content is dynamic or secured. A web developer can utlize an anchor tag in order to allow uses to specific pages. The anchor tag is a non-JavaScript way of navigating to specific pages.
How to Use:
- Open Browser
- Navigate to other pages to build history.
- Click on the input tags to go back.
Demonstration:
Ojambo.com JavaScript Back Method Tutorial
Conclusion:
Web application developers can create styled back buttons utilizing the JavaScript back method. Non-dynamic content works well with a back button.
An anchor tag is still the one of the best ways to allow visitors to navigate a site. A website cannot prevent visitors from using the back button.
- Recommendations:
- Do not assume visitors will not use their browser’s back button.
- Provide a navigation method for visitors.
- Use the JavaScript back method if the content is static.
- References:
- Ojambo.com HTML5 Page Jump Id Anchor.
Edward is a software engineer, web developer, and author dedicated to helping people achieve their personal and professional goals through actionable advice and real-world tools.