History

Browser History manipulation for Ajax based websites.

A History API allowing you to add eventListners to and force updates of the browser History and Location.

Using navigator.History object with pushState and popState where supported. Falls back to Hash and onHashChange, and implements a timerbased HashChange detection for IE7+IE6 support.

The History object can be used in conjunction with the Navigation module for a full scale ajax navigation model.

Functions

Util.History.addEvent

Definition

Name
Util.History.addEvent
Syntax
Void = Util.History.addEvent( Node node [, JSON _options ] );

Description

Catches popstate/hashchange and directs event to callback function on node

Parameters

node
Node Node to notify of event
_options
JSON Optional - additional settings.
Options
callback
Callback function name. Default: node.navigated.

Return values

Void

Examples

Default implementation
var node = u.qs("#content"); node.navigate = function(url) { // invoked when browser Location is changed } u.h.addEvent(node);

Simplest setup to catch all changes to Browser location.

With custom callback
var node = u.qs("#content"); node.urlChanged = function(url) { // invoked when browser Location is changed } u.h.addEvent(node, {"callback":"urlChanged"});

Dependencies

JavaScript
  • setInterval
  • typeof
  • switch ... case
  • for ... in
  • window.onhashchange
Manipulator
  • Util.Events.addEvent

Util.History.removeEvent

Definition

Name
Util.History.removeEvent
Syntax
Void = Util.History.removeEvent( Node node [, JSON _options ] );

Description

Removed popstate/hashchange eventListener from node

Parameters

node
Node Node eventListener was previously attatched to
_options
JSON Optional - additional settings.
Options
callback
Callback function name used previously.

Return values

Void

Examples

Default
var node = u.qs("#content"); u.h.removeEvent(node);

Simplest way remove an previously attatched eventListener.

With custom callback
var node = u.qs("#content"); u.h.removeEvent(node, {"callback":"urlChanged"});

Dependencies

JavaScript
  • switch ... case
Manipulator
  • Util.Events.removeEvent

Util.History.navigate

Definition

Name
Util.History.navigate
Syntax
Void = Util.History.navigate( String url [, Node node ] [, Boolean silent ] );

Description

Force browser Location update and invoke all registered eventlisteners, passing the new location url – unless the silent parameter is true, in which case no callback are made.

Parameters

url
String url to
node
Node Node associated with the change
silent
Boolean Default false. Set to true to skip callbacks.

Return values

Void

Examples

Default
u.h.navigate("http://manipulator.parentnode.dk");

Simplest way to update the Browser location and invoke all eventlisteners.

With assiciated node
var node = u.qs("#content"); u.h.navigate("http://manipulator.parentnode.dk", node);

Dependencies

JavaScript
  • history.replaceState
  • location.hash
Manipulator
  • Util.History.callback

Util.History.callback

Definition

Name
Util.History.callback
Syntax
Void = Util.History.callback( String url );

Description

Invoke all registered eventlisteners without updating the browser Location.

Parameters

url
String url to forward to eventListeners

Return values

Void

Examples

Default
u.h.callback("http://manipulator.parentnode.dk");

Tell all eventListeners that current url is http://manipulator.parentnode.dk.

Dependencies

JavaScript
  • typeof
Manipulator

Nothing

Util.History.getCleanUrl

Definition

Name
Util.History.getCleanUrl
Shorthand
u.h.getCleanUrl
Syntax
String = Util.History.getCleanUrl( String string [, Integer levels ] );

Description

Get clean url from string containing url, removing requesting domain and any HASH value. Can be used to with the levels parameter to only get a limited depth path.

Primarily a support function of general History functionality

Parameters

string
String String containing url to clean
levels
Integer Optional path levels to include

Return values

String Clean url

Examples

<script> u.h.getCleanUrl("http://manipulator.parentnode.dk/wishful/thinking#hash"); </script>

Returns /wishful/thinking

Dependencies

JavaScript
  • String.replace
  • location.protocol
  • document.domain
Manipulator

None

Util.History.getCleanHash

Definition

Name
Util.History.getCleanHash
Shorthand
u.h.getCleanHash
Syntax
String = Util.History.getCleanHash( String string [, Integer levels ] );

Description

Get clean url from location.hash containing url. Can be used to with the levels parameter to only get a limited depth path.

Primarily a support function of general History functionality

Parameters

string
String HASH string to be cleaned
levels
Integer Optional path levels to include

Return values

String Clean HASH value

Examples

<script> u.h.getCleanHash("#/hash/is/not/all/bad", 2); </script>

Returns /hash/is

Dependencies

JavaScript
  • String.replace
Manipulator

None

Files

Main file

  • u-history.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-history.js
desktop_ie11
u-history.js
desktop
u-history.js
desktop_ie10
u-history.js
desktop_ie9
u-history.js
desktop_light
u-history.js
tablet
u-history.js
tablet_light
u-history.js
smartphone
u-history.js
mobile
not tested
mobile_light
not tested
tv
u-history.js
seo
not supported