by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

5.1 Introducing the HTML5 History API

In this lesson you will learn how to access the HTML5 History API in JavaScript, in order to manually update the page URL. This will give you the ability to “trick” your browser into thinking it’s currently looking at another page.

5.1 Introducing the HTML5 History API

Hello and welcome back. Now that we've got our animated page transitions occurring like we want them to, the last thing we need to do is we need to control the URL of our page. Because even though we've clicked on the Join link we're still on the index page, as we can see in our URL bar. And what I'd really like to be able to do is not only change that URL to say join.html. But I also wanna be able to use the back button on our browser to go back to index.html. And we can do all of this using the HTML5 history API. Now, you can do a search online for the HTML5 history API, and you can get a lot of information on how that works. But one of the things that we have access to with this history API is something called push state. With the push state method we can actually assign our page a new URL. So we can make our page basically pretend like it's actually on the join.html page. We can even assign our page a new title which isn't fully supported yet but at least the new URL is pretty widely supported in new browsers. So let's take a look at how we can accomplish this. You'll notice that we're now in the site ten folder. So we're taking all of the files that we ended up with in the site nine folder and we're now pulling them in the site ten. All the changes we make in this lesson will be saved there in the site ten folder. So if we go to our main.js file I want to scroll down a little bit and focus on our load new page method. In this method remember we're loading an new URL into this temporary container we created. And we're replacing our HTML with the HTML from the new page. On top of that we also want to change the URL in the browser's URL bar. And again, we can do that very easily using the push state method in JavaScript. So after we set our HTML content here and maybe after our page id we can skip a couple of lines and this is very easy to accomplish. What we're gonna do is we're gonna point to Window.history, which is how we access that history API. And then, we're gonna do .pushstate. And then inside the pushstate method we can pass in a few things, the first thing we can pass in is a data object. And we don't really need that here. So I'm just gonna say no. The second thing we can pass in here is a new title for our page. I'm also gonna set that to null. Because this new title string here isn't really fully supported in very many browsers yet. But I will show you later how we can actually change that. But for now we'll just leave that as null. Or we can even leave that as a blank string. And then for our last string here, we are expecting a URL and this is going to be the URL that we want to show up in the browser bar. And that URL is going to correspond with the new URL that has been passed into our methods. So this variable up here that's been passed into the loadNewPage method, that's what we want to show up in the browser bar. With one line of code, hopefully we've been able to update the push date of our browser or the history of our browser. So let's save that and let's jump back into our browser and refresh the page. And so remember before we refresh the page if we were to click on the join button it would still say index.html. But now when we click on the join button our content animates and you'll see also that our URL has now changed to join.html. And again we were able to do that with just one line of code here. By calling the history.pushState method. Now, you can think of the history of our browser as kind of like an array of URLs. And when we use that pushState method, basically, what we're doing is we're basically pushing a new array element onto the end of that array. And then when we hit the back arrow, we're just going to the last element in that array. When we hit the forward arrow, we're going to the next element in that array. So one area where we haven't really accomplished what we're going for yet is if we hit the back arrow now. You'll see that our URL changes back to index.html which is cool. But our page is still showing the joined content. Well the good news is we can access the Click advance for the forward and back arrows using the pop state event. So let's take a look at how to do that. We'll jump back into our browser and let's go up to our Register Event Listeners Method. And I'm going to do this after our Click event for our traditional links. We'll skip a couple of lines here. And we're going to create a J query selector for the window. So we'll put window inside parenthesis here after that dollar sign. And then we're going to say on and then inside parentheses and inside quotation marks we're gonna say, popstate, all one word, all lowercase. And then we'll say comma space function. And so the way you can think of this is this popstate method is basically being triggered anytime we click on the forward or back arrow. So when we click on the browser's forward or back button, we're gonna run this function here. So the first thing we need to do in this function is we need to get the URL that we're now navigating back to if we hit the back arrow, for example. And once we hit that back arrow, the location of our page has already changed, has automatically changed as soon as we click on that back arrow. So what we can do because we can create a new variable here called page, and this will represent the URL for our new page. And what we can do is we can say location.pathname and that's going to give us the full path. And we really just want the last part of that path, the page name here. So we're going to say .split, and we're going to split it on the forward slash, just like we've done before. We're basically creating an array out of our URL splitting it up by the forward slashes. And in order to get the last element of that array, or anything that comes after the final forward slash, we're gonna say .pop. So if we hit the back arrow to take us back to the index that HTML page, then this right here will return index.html as a string. And we're storing that in this page variable. So now that we've done that, we can run our pageChange function just like we do when we click on one of our transition links. So what we can do is we can point to pageChange. And then pass into it that new URL that we just calculated, which we call page. And let's see if that works. We're going to jump back into our browser, we'll refresh the page, and we'll hit join. And sure enough, that takes us to the join page. Now let's see what happens if we hit the back arrow. Sure enough, our join page animates off and the home page animates back on. Now, you'll notice one issue and that is that after we hit the back arrow, our forward arrow is no longer there. It has disappeared. And, we'll talk about how to fix that in the next lesson.

Back to the top