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.silen], 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.silen

Boolean

= false] 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>
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=0" />
    <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="{&quot;page&quot;:{},&quot;ua&quot;:{}}">
    <div class="test i-bem" data-bem="{&quot;test&quot;:{&quot;change&quot;:&quot;params&quot;}}">click me to change location prams</div>
    <div class="test i-bem" data-bem="{&quot;test&quot;:{&quot;change&quot;:&quot;href&quot;}}">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>
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=0" />
    <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="{&quot;page&quot;:{},&quot;ua&quot;:{}}">
    <div class="test i-bem" data-bem="{&quot;test&quot;:{&quot;change&quot;:&quot;params&quot;}}">click me to change location prams</div>
    <div class="test i-bem" data-bem="{&quot;test&quot;:{&quot;change&quot;:&quot;href&quot;}}">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