Don't Break the Back Button! Use the HTML5 History API

Learn how you could be annoying visitors to your website by breaking the browser's navigation and how to easily fix it.
4.9 (7 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
349 students enrolled
$20
Take This Course
  • Lectures 10
  • Contents Video: 38 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2013 English

Course Description

If you're a web developer who is using JavaScript to update the content of web pages dynamically, you could be breaking the web browser!

How? The "back" button is by far the most used navigational element in the browser. It gives people browsing the web the confidence to click on links as they know they can go back to where they were if they do something wrong. They expect it to always work.

By updating part of a web page using client-side script, the behaviour of this button can be broken. This can frustrate and annoy visitors to your website, which will make them leave!

The recent introduction of the HTML5 History API allows us to fix this - we can do partial page updates and tell the browser that the content has changed, thereby keeping the back button in full working order.

In this course you'll learn:

  • How page navigation and the browser history work
  • How we can break the back button by doing partial page updates
  • How to fix it using the HTML5 History API
  • How to overcome inconsistencies in the API by using the History dot js JavaScript library
  • How to provide support for the history API in older, HTML4 browsers.

Throughout the course we'll be building a sample website that demonstrates all the techniques discussed in the lectures. Complete, working, fully-annotated source code is included.

What are the requirements?

  • Basic knowledge of HTML, JavaScript and jQuery is recommended.
  • The small amounts of server-side code that are used in the examples are written in PHP, but are very simple and detailed knowledge of PHP is not required.

What am I going to get from this course?

  • In this course, you'll learn how the browser history and the back button work to allow page navigation.
  • You'll learn how to do partial page updates, and in the process how this can break the back button. You'll also learn how to use the HTML5 History API to subsequently fix it.
  • You'll learn how to use the History.js JavaScript library to overcome the shortcomings of the HTML5 History API, and also how to get the same functionality in legacy, HTML4 browsers.

What is the target audience?

  • Any web developer who wants to avoid one of the biggest mistakes made when developing websites - breaking the back button.
  • Anyone developing a website who wants to use client-side JavaScript to do partial page updates, but who doesn't want to break the behaviour of the back button.
  • Web developers who want to know how to use the HTML5 History API. and the History.js JavaScript library.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Page navigation, history and the back button
02:58
In this lecture we'll talk about the objectives for the course, the technologies and methods we're going to use, and introduce the idea of the example website we're going to build throughout the course.
05:06
In this lecture we'll talk about web pages, URLs to identify them, and links to navigate between them.

Attached to this lecture is the first version of the example website we're going to build. The code is complete and fully annotated with ample comments describing what is happening at each stage.
01:44
In this lecture we talk about the browser history, how the back button works, and how it's the most popular navigation button in a browser.
06:31
In this lecture we talk about how partial page updates are a more efficient way of building a web page. We look at two techniques: one where all the content is loaded into a single page, and another where the dynamic content is loaded as a fragment of the page.

Full, annotated source code for the second version of our example website is attached to this lecture. In this version of our site, we change the dynamic part of the page using code rather than a full page refresh.
5 questions

Test your knowledge of pages, navigation, URLs, the back button and partial page updates.

Section 2: The HTML5 History API
01:32
In this lecture we introduce the HTML5 history API; its methods and events, and how it can be used to unbreak the back button.
03:43
In this lecture we find out how to use the pushState and replaceState methods of the HTML5 history API to tell the browser that we've changed the page content.

Full, annotated source code for the next version of our example site is attached to this lecture. In this version we partially fix the broken back button by adding values to the browser's history using script.
04:12
In this lecture we find out how to use the popstate event to detect when the user presses the back button, thereby fixing the other half of the broken back button. We also discover a major drawback of using the HTML5 history API.

Full, annotated source code for the next version of our example site is attached to this lecture. In this version we fully fix the broken back button by reading values from the browser's history using script.
4 questions
Test your knowledge of the HTML5 History API.
Section 3: History.js
06:23
In this lecture we discover the solution to the HTML5 history API cross-browser problem, in the form of the excellent History.js library. We'll talk about its functions and methods, and how it can replace the native history API with the minimum of code changes.

Full, annotated source code for this next version of our example site is attached to this lecture. In this version we replace the native history code with the History.js version, fixing browser inconsistencies and other issues with the native API.
04:44
In this lecture we use the capabilities of the History.js API to add history API functionality to legacy, HTML4 browsers.

Full, annotated source code for the next version of our example site is attached to this lecture. In this final version of our example site we enable support for HTML4 browsers, making our site work with modern, HTML5 browsers, legacy, HTML4 browsers, and even when JavaScript is unavailable.
01:36
In this lecture we review what we've learnt, and the example website that we've built.
5 questions

Test your knowledge of History.js.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hi, I'm Dave Hollingworth. I'm an IT trainer and web application developer. I've been programming for over twenty-five years, and teaching IT since 1999.

I've developed enterprise-level applications on platforms ranging from mainframes to mobiles: from my first web application, a quotes system created for a major insurance company back in 1999 - the first of its type in the sector - to interactive learning management systems for online language learning.

I've taught courses ranging from basic use of email to advanced web application development, both online and in-person. I've been teaching on Udemy since 2012.

I'm passionate about technology, and love teaching it! I believe it's possible to explain even the most complex subjects in a simple, straightforward way that doesn't confuse the student.

I look forward to welcoming you onto one of my courses!

Ready to start learning?
Take This Course