History.replaceState() пример?

Ответ 1

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

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

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

Потенциальное решение

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

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

Ответ 2

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

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(), но я не знаю, что именно вы хотите с ним делать.

Ответ 3

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

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

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

Вот простой пример 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));

Ответ 4

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

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;

Ответ 5

Второй аргумент Название не означает Название страницы - это больше определение/информация для состояния этой страницы

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

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

Ответ 6

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

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

Ответ 7

Я действительно хотел ответить на ответ @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);
}