Skip to content

erikringsmuth/pushstate-anchor

Repository files navigation

<a is="pushstate-anchor">

Extend the <a> tag with history.pushState()

Simpified version of the html5-history-anchor

A link from 1992.

<a href="/home">Home</a>

Now using pushState().

<a is="pushstate-anchor" href="/home">Home</a>

A complete example.

<a is="pushstate-anchor" href="/home"
   title="Home Page" state='{"message":"New State!"}'>Home</a>

Clicking this link calls the HTML5 history API.

window.history.pushState({message:'New State!'}, 'Home Page', '/home');
window.dispatchEvent(new PopStateEvent('popstate', {
  bubbles: false,
  cancelable: false,
  state: {message:'New State!'}
}));

Install

Download or run bower install pushstate-anchor --save

Import

<link rel="import" href="/bower_components/pushstate-anchor/pushstate-anchor.html">
or
<script src="/bower_components/pushstate-anchor/pushstate-anchor.js"></script>

Notes

The HTML5 history spec is a bit quirky. history.pushState() doesn't dispatch a popstate event or load a new page by itself. It was only meant to push state into history. This is an "undo" feature for single page applications. This is why you have to manually dispatch a popstate event. The pushstate-anchor will push the new state into history then dispatch a popstate event which you can use to load a new page with a router.

Build, Test, and Debug Build Status

Source files are under the src folder. The build process writes to the root directory. The easiest way to debug is to include the source script rather than the minified HTML import.

<script src="/bower_components/pushstate-anchor/src/pushstate-anchor.js"></script>

To build: