history.replaceState()示例？

Question

任何人都可以为history.replaceState提供一个有效的例子吗？这就是w3.org所说的:

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

更新会话历史记录中的当前条目,以获得给定的数据,标题,以及(如果提供的话)URL,而不是null.

更新:

这非常有效:

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

网址正在发生变化,但标题不会改变.这是一个错误还是我错过了什么？在最新的Chrome上测试过.

Answer 1

事实上,这是一个错误,虽然有意为期2年.问题在于一些不明确的规格以及document.title涉及到后退/前进的复杂性.

请参阅Webkit和Mozilla上的错误参考.此外,Opera在引入History API时表示它没有使用title参数,可能仍然没有.

目前,pushState和replaceState的第二个参数 - 历史条目的标题 - 在Opera的实现中没有使用,但可能是一天.

潜在解决方案

我看到的唯一方法是改变title元素并改为使用pushState:

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

Answer 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()但我不知道你想用它做什么.

Answer 3

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));

Answer 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;