location

Высокоуровневый блок для изменения window.location.

Использование

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

    // Изменяем `window.location` с помощью полного url
    location.change({ url: 'http://example.org:8080/path' });

    // Изменяем текущий location, используя только новые параметры запроса
    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'
]

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

location

Использование

Module location

Instance methods:

Отправить отзыв