Book Image

Practical Web Development

By : Paul Wellens
Book Image

Practical Web Development

By: Paul Wellens

Overview of this book

Table of Contents (23 chapters)
Practical Web Development
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
10
XML and JSON
Index

HTML5 History API and the history object


Browsers use a similar stack called the history stack. In JavaScript, you can access it through the history object, for which there are several methods available. The history object is part of the window object and is accessed through the window.history property. It has been around for years.

Normally, when the user navigates to a new page, the browser pushes the new URL on to its history stack and downloads and draws the new page. When the user presses the back button, the browser pops one page off its history stack and redraws the previous page.

But what if we use Ajax calls to update parts of the screen without needing to load a new page? Then, nothing is going to be pushed on to that stack by the browser. Well, that is true, unless we do it ourselves. And the key to making this possible is the popstate event and the history.pushState() function.

pushState()

Each time we create code to update part of the screen, as we did in the examples in the previous...