SpotFlow: Tracking Method Calls and States at Runtime
HTML5 History API Guide
1. HTML5 History API
Copyright 2016. Jyaasa Technologies. All Right Reserved
h
ttp://jyaasa.com
Sagun Shrestha
Visionary,
Jyaasa Technologies
2. ● What is history API?
● Why history API?
● How to use HTML5 history API?
Overview
3. What is history API?
Copyright 2016. Jyaasa Technologies. All Right Reserved
h
ttp://jyaasa.com
4. ● History object isn’t something new.
● We can trace history object back to early 1990’s
browser as well
● It was never a public standard until HTML5.
● With history api we have more control over browser's
history.
● We can add history and change the url of the browser
without refreshing page.
● Supports most of the browsers except IE 8,9 and opera
mini 8.
6. ● Browser create a history entry when a new page is
loaded.
● Before history api only way to change URL was to load
the whole page or to use hash values
● when using AJAX the page doesn't load but just a part
of page gets loaded and browser doesn't track this.
● History API gives us ability it manipulate browser
history to keep track of user's browsing pattern
accurately.
● HTML5 provides two methods:
○ history.pushState()
○ history.replaceState()
● Both of these methods allow us to add or update the
history of browser.
7. How to use history API?
Copyright 2016. Jyaasa Technologies. All Right Reserved
h
ttp://jyaasa.com
8.
9. ● pushState and popState both take same number of
arguments.
○ “State” can store JSON string and will be available
for popState event.
○ “Title” a title for the state
○ “URL” a new history url entry.
■ This url won’t be reloaded
■ If relative path is given the it’s resolved to
current URL
■ It must be of same origin otherwise pushState
will throw exception.
■ If it is not specified then it sets documents
current url
10. # Index.html
<html>
<head>
<title>This is history api DEMO</title>
<script type="text/javascript" src="./js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="./js/history_demo.js"></script>
</head>
<body>
<a href="1" id="test1">number</a>
<a href="new.html" class="text">new</a>
<a href="old.html" class="text">old</a>
<p class="sample_text">999</p>
<div id="text_content"></div>
</body>
</script>
</html>
# new.html
<p>This is NEW!</p>
#old.html
<p>This is OLD!</p>
11. History_demo.js
// this is for Number
$(document).ready(function(){
var count = 0;
$('#test1').on('click', function(e){
e.preventDefault();
count = count + 1;
data = count;
url = "/"+count.toString() + ".html";
$(".sample_text").text(count);
window.history.pushState({content: data}, null, url);
});
});
// This is for New && Old
$(document).on("ready",function(){
$('.text').on('click', function(e){
e.preventDefault();
url = $(this).attr("href");
$.get(url).done(function(resp){
$("#text_content").html(resp);
window.history.replaceState({content: resp}, null, url);
});
});
});
12. ● Now we will add popState window eventlistener in history_demo.js.
window.addEventListener("popstate", function(e) {
$(".sample_text").text(e.state.content);
$("#text_content").html(e.state.content);
});
● This event triggers when browser’s back is clicked:
13. ● Using ruby to fire-up an HTTP server in projects home directory
~/home/project_dir: ruby -run -e httpd . -p 3000
● In browser, enter http://localhost:3000
