Welcome to the another lesson of Html5 Tutorial Course.Here in this lesson we will discuss about History push state and History popState.So let’s start.
Html5 Tutorial – Lesson 1 Html5 Tutorial – Lesson 6
Html5 Tutorial – Lesson 2 Html5 Tutorial – Lesson 7
Html5 Tutorial – Lesson 3 Html5 Tutorial – Lesson 8
Html5 Tutorial – Lesson 4 Html5 Tutorial – Lesson 9
Html5 Tutorial – Lesson 10
4:HISTORY
4.1:History push state
One of the earliest criticisms of ajax is that it made difficult to save state record and what I mean by that is such a way that you have a link on your page when you click on it, it going to bring in some data with an ajax request maybe from the Twitter API.But the problem is from that point on the visitor your website has no way to link to that specific state in your web page.Now since then plenty of very smart JavaScript developers have figured out alternatives so that’s not really an issue.But now with Html 5 history API we have to speak into the browser and it’s really need.
The basic idea behind history API is that it now allows us to push new records to the browser’s history.So for example I have three links each one’s going to link to an image.So what we’re going to do here is when I click on one of this link rather than loading a whole new page instead I want to display that image on the same page and then I want to say a new record to the browser history in that way when I click the back and forward button I can switch between the different states on the page.
Let’s get started here is what we’re going to begin with I have an unordered list that contains just a handful of list items and each items also contains a specific image along with the title.Very simple unorder list.Let’s get started working with the history API.This is not a brand new Html5 it’s simply been extremely.
So for example for previous iterations of the history API we could do things like moving forward.So I can go and I go -1 in that means go back one page or I could say history.go(-1) and that’s means go back one page.Or I could say history.go(2) for go forward two pages or I could set that 0 to reload the current page
Image may be NSFW.
Clik here to view.
or alternatively I can also use history.forward to forward a page or back to move back a page.
Now we want to take a look at the push state method. The push state method is very simple.It allows us to push a new record to the browser’s history.So the basics syntax is going to be history.pushState and this method is going to accept a handful of parameters.The first one is going to be the data what data are we going to be setting in that way when they click back button we can retrieve that saves data and use it to render the page however we need to.
The second parameters is going to be a title.For example if I click on the back button the title that you see right here it will also be used for the title of the window.However at the time of this writing no browser currently supports it but you definitely want to add that there because they will eventually.And then finally be URL whatever you type here is what’s going to be displayed as the URL.So let’s jump into this and try it out.I’m going to create a new record in browser’s history and now i am going to write some data we don’t have anything so we mark it and we’ll give it a title “My page title” and finally the URL,I am jus give it a name of a page.
Image may be NSFW.
Clik here to view.
Now an important note: this is not going to work unless I reload the page and that’s because for the history API to function correctly it needs to be associated with the server rather than file.So you have a couple solution here.You can either take the files and upload them to your server or you can use a locle server.So for example like to work with PHP so I will put that up and I’ll transfer this file over to my local server project directory.There we are and I’m reloading the page now on my local server now I want you to detect note that it has run,we replace the url now it says slash page.We can change this to anything we want.So my new page.
Image may be NSFW.
Clik here to view.
And then I come back if I reload a page now we can see we called it in my new page.So this is an reporting things to pay attentio and this is something that trips a lot of people a lot.The history API is not creating links for you.So even though our url this is not a link that you can certainly email to your friends even if it was stored on a server not your local host.
So if I paste that in no that’s not going to work at all.That’s why the history API should be used in connection with a server side language.In that way your server side language should have the necessary code to take a URL like this and be able to decipher what to do.But that’s beyond the scope of this tutorial because it depends on what language you prefer. Now I reloade the page and if I click back you now see that we have links back to the previous pages.So I hit forward and now we are going to this new state and I headed back.
Next I’m going to show you how to listen for when these back buttons are pushed because right now it doesn’t do so smart we’re heading for it back but nothing is happening.We need to attach an event listener so we can hear when that button is press and then we can act accordingly and we’ll do that next.
4.2:History popState
Pushing a new record to the browser history is great but how do we actually use that data.And to do so we used the popState event.Now before we continue on I want you to remember we are not executing any feature detection we will do that when we get started on our final project.But for now we’re just focusing on the method and events that you need to be aware of.So we do this right down here below we will attach an event listener to the window object.So add an event listener and we’re going to listen for the new popState event.
Image may be NSFW.
Clik here to view.
When that occurs we’re going to execute this function.So this function will be run when ever the back or forward button is pressed and the history is directing to a page that is still part of the current page.So in that case for not directing to an entirely different site like Netflix we’re directing to a different state of current page.I get back the pages not reloading or simply mocking the effect of a back or forward press.So for now just write console.log(e) and see what we got here.
Once again I’m going to reload the page and I’m going to open up Chrome developer tools and I want you to pay attention to something if I reload this page even though we have not press forward or back button in Chrome the popState event fires mediately when the page load.
Because the browser treats that as a state change if you think about it sort of makes sense.But still that’s not going to accur in any other browser at the time of this writing.So if I open up the popState event you can see here couple of things we wanted to pay attention is right here.
Image may be NSFW.
Clik here to view.
Now because Chrome is executing this when the page loads state is equal to falls.However when we actually hit the back or forward button in there is a new record that we pushed,State will be equal to the data that we saved.So let’s try it out I’m going to clear this we have push to new state we know we did that in the previous lesson.
So I should be able to hit back and when I hit that this event is going too fire and we’re going to console.log(e).I hit back in there we are. That fired i will open this up and now we have this hope that we can work with. Now again though the popState event isn’t handling the process of changing the visuals of the page.
It’s simply providing us a hook so we can hook into that and then we can manually change the state.So for example in the next lesson when we work on our project we’ll click on each of these images and load them.Then when you press the back button that pops a defense is not going to refer to the previous image that we click instead we hook into that offend in then we call the necessary method that will lower the applicable image.So we’ll get started on our project in the next lesson.
The post Html5 Tutorial – Lesson 10 appeared first on DevsTrend.