HTML5 History

HTML5 History API

Copyright 2016. Jyaasa Technologies. All Right Reserved

http://jyaasa.com

Sagun ShresthaVisionary,

Jyaasa Technologies

● What is history API?● Why history API?● How to use HTML5 history API?

Overview

What is history API?

Copyright 2016. Jyaasa Technologies. All Right Reserved http://jyaasa.com

● 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.

Why history API?


● 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.

How to use history API?


● 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

# 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>

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); }); });});

● 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:

● 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

DEMO


Thank you


HTML5 History

Software

Transcript of HTML5 History