history.replaceState()示例?

时间:2012-10-11 04:39:56

标签: javascript ajax html5

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

  

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

     

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

更新

这非常有效:

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

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

9 个答案:

答案 0 :(得分:62)

确实这是一个错误,虽然故意有2年了。 问题在于一些不明确的规范以及涉及document.title和后退/前进时的复杂性。

请参阅WebkitMozilla上的错误参考。 Opera也引入了历史API said it wasn't using the title parameter,可能仍然没有。

  

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

潜在解决方案

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

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

答案 1 :(得分:33)

这是一个极小的,人为的例子。

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()还有更多内容,但我不知道你想要用它做什么。

答案 2 :(得分:9)

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

答案 3 :(得分:6)

查看示例

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;

答案 4 :(得分:2)

第二个参数 Title 并不意味着页面的标题 - 它更像是该页面状态的定义/信息

但是我们仍然可以使用 onpopstate 事件更改标题,并且不是从第二个参数传递标题名称,而是从作为对象传递的第一个参数传递属性

参考: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

答案 5 :(得分:1)

根据MDN History doc
有明确说第二个论点是为了将来使用的未来。你是对的,第二个参数是处理网页标题,但目前它被所有主要浏览器忽略。

Firefox目前忽略了这个参数,尽管将来可能会使用它。在此处传递空字符串应该可以安全地防止将来对方法进行更改。或者,您可以为您正在移动的州通过一个简短的标题。

答案 6 :(得分:1)

我真的很想回应@Sev的回答。

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

答案 7 :(得分:0)

假设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是否存在。

答案 8 :(得分:0)

将此视为 URL:http://localhost:4200/inspections/report-details/60c88e4e76b14c00193f5bef

let reportId = '60c88e4e76b14c00193f5bef', scope = "dynamic"

window.history.replaceState(null, null, `inspections/report-details/${reportId}?damagePart=` + scope );

这将产生输出 http://localhost:4200/inspections/report-details/60c88e4e76b14c00193f5bef?damagePart=dynamic/