history

Module provides work with browser History with two modificators:

provider_history-api – supports native History API;
provider_hashchange – supports fallback on hashchange event.

Usage

modules.require(['history'], function(History) {

    // Create history instance
    var history = new History();

    // Push new or replace history state
    history.changeState('push', { title: 'Title', url: 'http://example.org:8080/path' });
    history.changeState('replace', { title: 'Title', url: 'http://example.org:8080/path?test=1' });

});

history

Instance methods:

pushState
replaceState
changeState

history_provider_hashchange

Instance methods:

changeState

history_provider_history-api

Instance methods:

changeState

Module history

Augments:events:Emitter

BEM wrap for History API.

Instance methods:

pushState(data, title, [url]):Object

description

Adds new state to browsing history.

parameters

data

Object

New state data.

title

String

Document title.

url

String

Location url.

replaceState(data, title, [url]):Object

description

Replaces current state.

parameters

data

Object

New state data

title

String

Document title.

url

String

Location url.

changeState(method, state):Object

description

Changes current state. By default it performs simple page redirect. Method may be extended in modificators.

parameters

method

String

Push or Replace method.

state

Object

history_provider_hashchange

Augments:Base

Modificator for BEM-block history which provides history API support through hashchange fallback.

Instance methods:

changeState(method, state)

description

Change window location hash

parameters

method

String

state

Object

history_provider_history-api

Augments:Base

Modificator for BEM-block history which provides native history API support.

Instance methods:

changeState(method, state):event

description

Change window location hash

parameters

method

String

state

Object

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>bem-history: history</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
</head>

<body class="page ua i-bem" data-bem='{"ua":{}}'>touch history
    <script src="_simple.js"></script>
</body>

</html>

{
    block: 'page',
    title: 'bem-history: history',
    scripts: [
        {
            elem: 'js',
            url: '_simple.js'
        }
    ],
    content: 'touch history'
}

[
    'page'
]

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>bem-history: history</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
</head>

<body class="page ua i-bem" data-bem='{"ua":{}}'>touch history
    <script src="_simple.js"></script>
</body>

</html>

{
    block: 'page',
    title: 'bem-history: history',
    scripts: [
        {
            elem: 'js',
            url: '_simple.js'
        }
    ],
    content: 'touch history'
}

[
    'page'
]

Methodology

Technology

Toolbox

Libraries

Tutorials

history

Usage

Module history

Instance methods:

history_provider_hashchange

Instance methods:

history_provider_history-api

Instance methods:

Send feedback