Пример history.replaceState ()?

Может ли кто-нибудь привести рабочий пример для history.replaceState? Вот что говорит w3.org :

history . replaceState(data, title [, url ] )

Обновляет текущую запись в истории сеанса, чтобы она содержала указанные данные, заголовок и, если он указан, а не null, URL.

Обновить:

Это отлично работает:

history.replaceState( {} , 'foo', '/foo' );

URL меняется, но заголовок не меняется. Это ошибка или я что-то упускаю? Проверено на последней версии Chrome.

На самом деле это ошибка, но уже 2 года преднамеренная. Проблема заключается в некоторых неясных спецификациях и сложности, когда document.titleзадействованы и назад / вперед.

См. Справку об ошибках в Webkit и Mozilla . Также Opera при внедрении History API заявила, что не использует параметр title и, вероятно, до сих пор не использует.

В настоящее время второй аргумент pushState и replaceState - заголовок записи в истории - не используется в реализации Opera, но может быть одним днем.

Возможное решение

Единственный способ, который я вижу, - это изменить элемент заголовка и вместо этого использовать pushState:

document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );

Вот минимальный надуманный пример.

console.log( window.location.href );  // whatever your current location href is
window.history.replaceState( {} , 'foo', '/foo' );
console.log( window.location.href );  // oh, hey, it replaced the path with /foo

Это еще не все, replaceState()но я не знаю, что именно вы хотите с этим делать.

history.pushStateпомещает текущее состояние страницы в стек истории и изменяет URL-адрес в адресной строке. Итак, когда вы вернетесь, это состояние (объект, который вы передали) будет возвращен вам.

В настоящее время это все, что он делает. Любые другие действия на странице, такие как отображение новой страницы или изменение заголовка страницы, должны выполняться вами.

Спецификация W3C, на которую вы ссылаетесь, является всего лишь черновиком, и браузер может реализовать ее по-другому. Например, Firefoxtitle полностью игнорирует параметр.

Вот простой пример, pushStateкоторый я использую на своем веб-сайте.

(function($){
    // Use AJAX to load the page, and change the title
    function loadPage(sel, p){
        $(sel).load(p + ' #content', function(){
            document.title = $('#pageData').data('title');
        });
    }

    // When a link is clicked, use AJAX to load that page
    // but use pushState to change the URL bar
    $(document).on('click', 'a', function(e){
        e.preventDefault();
        history.pushState({page: this.href}, '', this.href);
        loadPage('#frontPage', this.href);
    });

    // This event is triggered when you visit a page in the history
    // like when yu push the "back" button
    $(window).on('popstate', function(e){
        loadPage('#frontPage', location.pathname);
        console.log(e.originalEvent.state);
    });
}(jQuery));

посмотрите на пример

window.history.replaceState({
    foo: 'bar'
}, 'Nice URL Title', '/nice_url');

window.onpopstate = function (e) {
    if (typeof e.state == "object" && e.state.foo == "bar") {
        alert("Blah blah blah");
    }
};

window.history.go(-1);

и поиск location.hash;

Второй аргумент Заголовок не означает заголовок страницы - это скорее определение / информация о состоянии этой страницы.

Но мы все еще можем изменить заголовок с помощью события onpopstate и передать имя заголовка не из второго аргумента, а как атрибут из первого параметра, переданного как объект

Ссылка: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Согласно документу истории MDN.
Здесь ясно сказано, что второй аргумент на будущее используется, а не сейчас. Вы правы, что второй аргумент касается заголовка веб-страницы, но в настоящее время он игнорируется всеми основными браузерами.

Firefox в настоящее время игнорирует этот параметр, хотя может использовать его в будущем. Передача здесь пустой строки должна быть защищена от будущих изменений метода. Как вариант, вы можете передать краткое название состояния, в которое вы переходите.

Я очень хотел ответить на ответ @Sev.

Сев прав, внутри ошибка window.history.replaceState

Чтобы исправить это, просто перепишите конструктор, задав заголовок вручную.

var replaceState_tmp = window.history.replaceState.constructor;
window.history.replaceState.constructor = function(obj, title, url){
    var title_ = document.getElementsByTagName('title')[0];
    if(title_ != undefined){
        title_.innerHTML = title;
    }else{
        var title__ = document.createElement('title');
        title__.innerHTML = title;
        var head_ = document.getElementsByTagName('head')[0];
        if(head_ != undefined){
            head_.appendChild(title__);
        }else{
            var head__ = document.createElement('head');
            document.documentElement.appendChild(head__);
            head__.appendChild(title__);
        }
    }
    replaceState_tmp(obj,title, url);
}

Предположим, https://www.mozilla.org/foo.html выполняет следующий код JavaScript:

const stateObj = { foo: 'bar' };

history.pushState(stateObj, '', 'bar.html');

В результате в строке URL отобразится https://www.mozilla.org/bar2.html , но браузер не загрузит bar2.html или даже не проверит, существует ли bar2.html.