Приклад history.replaceState ()?

Чи може хтось надати робочий приклад для history.replaceState? Про це говорить w3.org :

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

Оновлення поточного запису в історії сеансу, щоб мати дані, назву та, якщо вони надані, а не нульові, URL-адресу.

Оновлення:

Це прекрасно працює:

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

URL змінюється, але назва не змінюється. Це помилка чи я щось пропускаю? Тестовано на останньому Chrome.

Дійсно, це помилка, хоча навмисна вже 2 роки. Проблема полягає в деяких незрозумілих характеристиках та складності, коли document.titleзадіяні та назад / вперед.

Дивіться посилання на помилки на веб- сайтах Webkit та Mozilla . Також Opera при введенні історії API заявила, що не використовує параметр title, і, ймовірно, все ще не працює.

В даний час 2-й аргумент pushState і substituState - заголовок запису історії - не використовується в реалізації 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.