Don't Break the Back Button! Use the HTML5 History API
4.7 (9 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.
363 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Don't Break the Back Button! Use the HTML5 History API to your Wishlist.

Add to Wishlist

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.7 (9 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.
363 students enrolled
Created by Dave Hollingworth
Last updated 4/2013
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 38 mins on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
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.
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.

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
+
Page navigation, history and the back button
4 Lectures 16:19
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.
Preview 02:58

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.
Preview 05:06

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.
Preview 01:44

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.
Preview 06:31

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

Page navigation, history and the back button
5 questions
+
The HTML5 History API
3 Lectures 09:27
In this lecture we introduce the HTML5 history API; its methods and events, and how it can be used to unbreak the back button.
Preview 01:32

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.
Saving state changes: pushState and replaceState
03:43

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.
Reading state changes: popstate
04:12

Test your knowledge of the HTML5 History API.
The HTML5 History API
4 questions
+
History.js
3 Lectures 12:43
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.
What is History.js and how do we use it?
06:23

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.
Using History.js in HTML4 browsers
04:44

In this lecture we review what we've learnt, and the example website that we've built.
Conclusion
01:36

Test your knowledge of History.js.

History.js
5 questions
About the Instructor
Dave Hollingworth
4.7 Average rating
762 Reviews
3,618 Students
7 Courses
IT Trainer

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!