location

High-level module for a window.location change.

Usage

modules.require(['location'], function(location) {

    // Change `window.location` using a full url
    location.change({ url: 'http://example.org:8080/path' });

    // Change current location using only the new query params
    location.change({ params: { param1: [11,12], param2: 'ololo' } });
    window.location.href; // "http://example.org:8080/path?param1=11&param1=12&param2=ololo"

});

location

Instance methods:

change
getState
getUri
getReferer

Module location

Augments:events:Emitter

Instance methods:

change(data, data.params, data.url, [data.silent], data.forceParams, data.replace)

description

Method for a location change. It's possible to change location by an exact url or a query params (params can be overwritten using the forceParams flag). Method work depends on the provided data.

parameters

data

Object

data.params

Object

query params

data.url

String

new url

data.silent

Boolean

do not trigger change event

data.forceParams

Boolean

flag to overwrite current params with new. By default new params are extended with old

data.replace

Boolean

write history record or replace current

getState():Object

description

Returns current state.

getUri():uri

description

Returns an Uri instance constructed from the current state url.

getReferer():String

description

Returns previous url.

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: location</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <script src="_simple.js"></script>
</head>

<body class="page">
    <div class="test i-bem" data-bem='{"test":{}}'>click me to change location prams</div>
    <div class="test i-bem" data-bem='{"test":{}}'>click me to change location href</div>
</body>

</html>

{
    block: 'page',
    title: 'bem-history: location',
    head: {
        elem: 'js',
        url: '_simple.js'
    },
    content: [
        {
            block: 'test',
            js: {
                change: 'params'
            },
            content: 'click me to change location prams'
        },
        {
            block: 'test',
            js: {
                change: 'href'
            },
            content: 'click me to change location href'
        }
    ]
}

[
    'page',
    'test'
]

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: location</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
    </script>
    <script src="_simple.js"></script>
</head>

<body class="page">
    <div class="test i-bem" data-bem='{"test":{}}'>click me to change location prams</div>
    <div class="test i-bem" data-bem='{"test":{}}'>click me to change location href</div>
</body>

</html>

{
    block: 'page',
    title: 'bem-history: location',
    head: {
        elem: 'js',
        url: '_simple.js'
    },
    content: [
        {
            block: 'test',
            js: {
                change: 'params'
            },
            content: 'click me to change location prams'
        },
        {
            block: 'test',
            js: {
                change: 'href'
            },
            content: 'click me to change location href'
        }
    ]
}

[
    'page',
    'test'
]

Methodology

Technology

Toolbox

Libraries

Tutorials

location

Usage

Module location

Instance methods:

Send feedback