Pre HTML5 we could only perform few basic operations on the browser history stack, simple operations like re-visiting a previously visited URL. Today (with HTML5) we can perform more complex operations on the browser history stack.
\n
\nIn this example we are going to develop simple modules that work with the new features added to HTML5 history API.
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nFor this example we will use:<\/p>\n
Every time a browser visits a new URL, it records or stores the URL (some browsers implementation store the URL in a local SQL database, if the browser is shut down and restarted again the user history is still available). An exception to this is when the user is surfing the web in incognito mode(the history is not stored permanently)In that case once the tab is deleted, its history is also deleted.
\n
\nFor example a user visits “google.com” then google.com is stored in the browser history record, as the latest record- on top of the stack. If the user then visits Microsoft.com and later webcodegeeks.com. The stack will look something like what is seen below:<\/p>\n
http:\/\/www.webcodegeeks.com\r\nhttp:\/\/www.microsoft.com\r\nhttp:\/\/www.google.com\r\n<\/pre>\nThe browser pointer would be at the latest record(webcodegeeks). A go back operation will cause the pointer to move to the second URL in the list(Microsoft) and the URL is loaded either from the browser cache or the server. If the browser pointer is at webcodegeeks.com, a go forward operation is ignored because webcodegeeks.com is the first or latest record.<\/p>\n
1.1 Security Restrictions<\/h3>\n
For good reasons their are restrictions placed on the history API, these restrictions reduce the chances of a user being scammed by a malicious website. The HTML5 history API only gives a web page access to the part of the browsing history which lies within the same domain as the web page itself. With this restriction in place, a web page cannot see or edit other websites a user has visited.<\/p>\n
Similarly the HTML5 history API does not allow a web page to push URLs onto the history stack(we would learn how to do this in a later section) which are outside the same domain as the domain of the web page. This restriction ensures that a web page cannot pretend to have forwarded the user to another website.<\/p>\n
1.2 Old History API<\/h3>\n
In this section we are going to look at the methods available to the early history API(before html5). These methods can be accessed through the history object, and the latter\u00a0can be accessed through the window object. The history object has a property length, which returns the number of URLS in the history list.
\nThe methods available to the history objects are:<\/p>\n
window.history.back();\r\n\r\n<\/pre>\nIt functions as if the user clicked the back button on the browser interface.<\/li>\n
window.history.forward();\r\n<\/pre>\nIt functions as if the user clicked the forward button on the browser interface.<\/li>\n
window.history.go(1);\/\/goes one steps forward\r\nwindow.history.go(2);\/\/goes two steps forward\r\nwindow.history.go(-1);\/\/goes one step backward\r\n\r\nwindow.history.go(-2);\/\/goes two step backward\r\n<\/pre>\n<\/li>\n<\/ul>\nSince the\u00a0window object is the default object you can leave it out. A user cannot move forward in history unless the user has first moved back in history.
\nLets look at a complete example below:<\/p>\nindex.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n#pick{\r\nmargin:10px;\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 History API Example\r\n<\/title>\r\n\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nfunction init(){\r\nvar b=document.getElementById(\"back\")\r\n\/\/get the back button \r\nb.addEventListener(\"click\",goback,false);\/\/register an onclick event listener\r\nvar f=document.getElementById(\"forward\")\r\n\/\/get the forward button \r\nf.addEventListener(\"click\",goforward,false);\/\/register an onclick event listener\r\nvar b=document.getElementById(\"go\")\r\n\/\/get the go button \r\nb.addEventListener(\"click\",gos,false);\/\/register an onclick event listener\r\n}\r\nfunction goback(){\r\nwindow.history.back();\/\/call the history method go back\r\nconsole.log(\"going back\")\/\/print out message\r\n\r\n}\r\nfunction goforward(){\r\nwindow.history.forward();\/\/call the history method go forward\r\nconsole.log(\"going forward\")\/\/print out message\r\n\r\n}\r\nfunction gos(){\r\nvar d=document.getElementById(\"tex\")\r\nvar d1=d.value;\r\nif(d1==\"\")\r\nconsole.error(\"Wrong Value Specified\");\/\/no valid input was found, print out error message\r\nelse\r\nwindow.history.go(d1);\r\nconsole.log(\"going to a specified position\");\/\/ print out message\r\n\r\n}\r\n<\/script>\r\n<p>\r\n<p>\r\n<input type = button id = back value=back>\r\n<\/p>\r\n<p>\r\n<input type = button id = forward value=forward>\r\n<\/p>\r\n<p>\r\n<label>Enter a valid step number<\/label>\r\n<input type = text id = tex >\r\n<input type = button id = go value=go>\r\n<\/p>\r\n<\/p>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nWe add three buttons and a textbox to the user interface. Click the button labelled back to go back, click the button labelled forward to go forward, enter a valid number in the textbox and click go to move to a specific URL.
\n
\nNote<\/b> The script doesn’t check for illegal values like letters. So make sure you enter a valid number e.g 1, 2, -1, -2. This example works best when your browser\/tab actually has a history length greater than 0.
\n
\nNote<\/b>: Inline JavaScript should be avoided because it makes the markup bigger and less readable. The content, structure and behavior are not well-separated, thus making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the\u00a0Window\u00a0object, thus polluting the global namespace.<\/p>\n1.3 New API<\/h3>\n
The new API were added in HTML5. The methods we can work with are:<\/p>\n
\n
- pushState(): This method pushes a state to the history stack or list. A simple example below\n
var stateobj = {}; \r\nvar title = \"\"; \r\nvar url = \"index.html\";\r\nhistory.pushState(stateobj, title, url);\r\n\r\n<\/pre>\n