Html programming crash course (2015)
Chapter 6: Working With Browser History
In this chapter, you will learn about working with browser history, including: • The History API • Pop.history.html example |
HTML5 gives you greater control on the history of the browser. This is achieved through the HTML history of object. We will create an example called pop-history.html in which the user can click on the Back button to move one page back. The user can also click on the Forward button to move one page forward.
Who also have the ability to enter a specific integer in a text field, click Go, and the page can move ahead by the value of the integer. On the other hand, a negative number would move the page backwards.
To get the pushing and popping of data to work, you need to use a browser that supports this function. Unfortunately, currently there are no browsers that support this. Nonetheless, it is important that you understand how this works so you get ready well before the browsers do.
The History API
The history option is a component of the window object in web browsers. Therefore, this can be referred to as window.history object. Here are the functions and attributes that can be used to assimilate window.history support within HTML5:
• window.history.length;
• window.history.go();
• window.history.back();
• window.history.forward();
• window.history.pushState();
• window.history.replaceState();
• window.onpopstate
Let us look at these in greater detail:
window.history.length
This is an attribute that provides the number of entries in a browser’s session history.
window.history.back()
This function moves one step back in the browser’s history. It returns the web browser to the previous web page.
If no previous page is available, the function will do nothing.
window.history.forward()
This function moves one step forward in the web browser’s history. This means that if you moved to Page X from Page Y, and returned to Page Y. This function can be executed to move forward to Page X.
If no next page exists in the history, this function will do nothing.
window.history.go([delta])
This function allows you to move backward or forward by any number you desire. Note that the delta argument is mentioned in brackets; therefore, it is optional. If no delta is provided, the browser will simply reload the page currently being shown.
The function would do nothing if the delta is out of the range of history.
window.history.pushState(data, title[, url ] )
This is the function that enables you to push data into the history of the browser. Data is the argument in the object that stores your data; title is name which you want to use to reference your data, whereas, the url is that argument that enables you to link data with a certain page so that it can be popped when the page reloads.
window.history.replaceState(data, title[, url ] )
This function replaces a current entry in history if you give it the data, title, and URL.
window.onpopstate
This event takes place when state history is popped in order to become accessible.
pop-history.html Example
Let us get started with the example. Follow the steps given below:
1. Just like always, create an HTML file using a text editor and name it pop-history.html
2. Enter the code given below:
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body> <h1>Page to Page History</h1> . . . </body> </html> |
3. To create <div> elements which will be used to display the results in this example, add the following code:
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> |
4. Save the file in text format.
Now that we have created the base file, let us now get it to do something interesting.
Add A Back Button
You can, using the window.history.back() function, enable a user to navigate backwards in the browser’s history.
To add this button, follow the instructions given below:
1. Open pop-history.html
2. Add the subsequent code to create a button:
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> . . . <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> |
3. In order to make the Back button active, you have to connect it to the function called window.history.back(). Here’s how you can do that:
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> <script type=”text/javascript”> function back() { window.history.back(); } </script> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> |
4. Save the file in plain text format.
Now the Back button will appear in the document and a user can click it to navigate backwards (one page) in the history.
Add A Forward Button
Just the way you created a back button to enable a user to move back one page in the browser history, you can also create a forward button. Here’s how:
1. Open pop-history.html using your favorite text editor
2. To create a Forward button, add this code:
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <input type=”button” value=”Forward” onclick=”forward();”> <br> . . . <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> |
3. To activate the Forward button, you will have to connect it to the window.history.forward() function.
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> <script type=”text/javascript”> function back() { window.history.back(); } function forward() { window.history.forward(); } </script> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <input type=”button” value=”Forward” onclick=”forward();”> <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> |
4. Save the file in text format.
Now the user will be able to navigate one page forward in the history.
Add A Go Button
You can even let users enter the number of pages that they wish to navigate to, either backwards or forwards. This means that they will have to enter an integer in text field and click the Go button, which would utilize the window.history.go() function to achieve this.
Here is how you can add a Go button:
1. Open pop-history.html in a text editor.
2. Add the code given below to create a new Go button along with a text field.
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <input type=”button” value=”Forward” onclick=”forward();”> <br> Pages to move by: <input id=”amount” type=”text”> <input type=”button” value=”Go” onclick=”go();”> <br> . . . <br> <div id=”length”></div> <br> <div id=”state”></div> <br> </body> </html> |
3. Just like before, you will have to active the Go button by connecting it to the function called window.history.go().
<!DOCTYPE html> <html> <head> <title> Page to Page History </title> <script type=”text/javascript”> function back() { window.history.back(); } function forward() { window.history.forward(); } function go() { var amount = document.getElementById (“amount”).value; window.history.go(amount); } </script> </head> <body onload=”loader()”> <h1>Page to Page History</h1> <input type=”button” value=”Back” onclick=”back();”> <br> <input type=”button” value=”Forward” onclick=”forward();”> <br> <div id=”length”></div> <br> <div id=”state”></div> <br> Pages to move by: <input id=”amount” type=”text”> <input type=”button” value=”Go” onclick=”go();”> <br> </body> </html> |
4. Save the pop-history.html file in plain text format.
Now the user will be able to enter a certain number in the text field and click the Go button to navigate forwards or backwards. A number with a minus sign would navigate backwards, whereas a positive number would move the page forward. (e.g. -2 for two pages backwards and 2 for two pages forwards)
Summary
HTML5 gives you greater control on the history of the browser through the HTML history of object.
The history option is a component of the window object in web browsers and can be referred to as window.history object.
New Elements In HTML5
HTML5 comes equipped with a number of new elements. They are as follows:
• <article> • <aside> • <audio> • <canvas> • <command> • <datalist> • <details> • <embed> • <figcaption> • <figure> • <footer> • <header> • <hgroup> • <keygen> |
• <mark> • <meter> • <nav> • <output> • <progress> • <rp> • <rt> • <ruby> • <section> • <source> • <summary> • <time> • <video> |
To learn more about these elements, you can visit the following page at W3C’s website: www.w3.org/TR/html5/spec.html#auto-toc-8
Also, you should note that the following elements have been removed in the latest version of hyper-text markup language:
• <acronym> • <applet> • <basefont> • <big> • <center> • <dir> • <font> • <frame> |
• <frameset> • <isindex> • <noframes> • <s> • <strike> • <tt> • <u> |
Where To Go From Here
The purpose of this book was to get you started with the basics of HTML5, and perhaps instill an interest for this very powerful scripting language. Our primary focus was to shed some light on what can be done in HTML5; and as you may have seen and understood, HTML is the language of the Web.
While it can be intimidating for many to learn a new language, when it comes to HTML, there are many reasons why you should really consider learning HTML.
Before we discuss why, let’s look at what you can do with HTML.
The web is made up of HTML. Period. This means that your possibilities are endless when it comes to web design. While you may also wish to learn JavaScript and CSS to enhance your web pages, the core remains to be HTML!
Also, with so many WYSIWYG web page editors out there, many wonder why they need to learn coding in the first place. However, this is the wrong approach. There are many instances where you will have to manually overcome errors by going through the code – so it always helps to have a thorough understanding of this language.
If you wish to build upon your foundation of HTML, you may wish to take on some advanced courses that will unleash and help you understand the power of HTML which can be extremely useful in your career or hobby!
Good luck!