ReplaceState()例子？

小开

这里有一个最小的、人为的例子。

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()，但我不知道它究竟是什么，你想做的。

小开

事实上，这是一个 bug，尽管它已经故意存在了2年。问题在于当涉及到 document.title和后/前向时，一些不明确的规范和复杂性。

参见关于 Webkit和 Mozilla的 bug 参考文献。还有 Opera 对历史 API 说它没有使用 title 参数的介绍，可能现在还没有。

目前，pushState 和 replace State 的第二个参数是标题在 Opera 的实现中没有使用，但是可以使用总有一天。

潜在的解决方案

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

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

小开

看看这个例子

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;

小开

history.pushState将目前页面状态推送到历史堆栈上，并更改地址栏中的 URL。因此，当您返回时，该状态(您传递的对象)将返回给您。

目前，这就是它所做的一切。任何其他页面操作，例如显示新页面或更改页面标题，都必须由您执行。

您链接的 W3C 规范只是一个草案，浏览器可能会以不同的方式实现它。例如，火狐完全忽略 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));

小开

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

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

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

小开

根据 MDN 历史文档
有明确的说法，第二个论点是为了将来使用，而不是为了现在。你是对的，第二个论点是处理网页标题，但目前它被所有主要的浏览器忽略。

Firefox 目前忽略这个参数，尽管将来可能会使用它。在这里传递空字符串应该是安全的，以防将来对方法进行更改。或者，您可以为要移动到的状态传递一个简短的标题。

小开

我真的很想回应“ 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);
}

小开

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

小开

可以将其视为 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/

ReplaceState()例子？

更新