Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 7 ■ JavaScript and User Interaction: Navigation and Forms
Using replace() can be quite annoying, because you break the user’s Back button functionality. She cannot go
back to the current page when she doesn’t like the one you sent her to.
The list of pages the user visited before reaching the current one is stored in the window.history object. This
object has only one single property, called length, which stores the number of already visited pages. It has a few
methods you can use (with the last two in the following list added as part of HTML5):
• back(): Go back one page in the browser history.
• forward(): Go forward one page in the browser history.
• go(n): Go n steps forward or back in the browser history depending on whether n is positive or
negative. You can also reload the same page via history.go(0).
• pushState (state, title, url): This method pushes data into the session history, where
state represents an object full of data, title represents the page title, and url represents the
URL added to the history.
• replaceState (state, title, url): This method works in the same way pushState() does,
but it modifies data instead of adding new data to the browser’s history.
The history object allows you only to navigate to the other pages—not read out their URIs or change them.
The exception to the rule is the current page, which gets wiped from the browser history when you use replace().
As already explained in the previous chapter, you effectively simulate browser functionality by sending the user
to other pages via JavaScript, which might be superfluous or thoroughly confuse the user.
In-Page Navigation
You can use JavaScript to make navigation within the same page more interesting and less screen-space consuming.
In HTML, you can provide in-page navigation via anchors and targets, both defined with the tag, either with an
href attribute for an anchor or a name or id attribute for a target.
■ ■Note The name attribute for anchors is deprecated in HTML5, and it actually is enough to provide an ID to link an
anchor and target pair. However, to ensure compatibility with older browsers, it might be a good idea to use it as you will
in the following example.
Let’s take a list of internal links in a table of contents linked to different targets further down the page as an
example for in-page navigation:
exampleLinkedAnchors.html (excerpt)
X - a tool that does Y
Information
Demo
Installation
Use
License
Download
www.it-ebooks.info
203