누구나 history.replaceState에 대한 실제 예제를 제공 할 수 있습니까? 이것이 w3.org가 말하는 것입니다 :
history . replaceState(data, title [, url ] )주어진 데이터, 제목 및 제공된 경우 (널이 아닌 경우) URL을 갖도록 세션 히스토리의 현재 항목을 업데이트합니다.
최신 정보:
이것은 완벽하게 작동합니다.
history.replaceState( {} , 'foo', '/foo' );URL은 변경되지만 제목은 변경되지 않습니다. 버그입니까, 아니면 뭔가 빠졌습니까? 최신 Chrome에서 테스트되었습니다.
답변
실제로 이것은 2 년 동안 의도적이지만 버그입니다. 문제는 불분명 한 스펙과 복잡 할 때 document.title와 뒤로 / 앞으로 의 복잡성 에 있습니다.
Webkit 및 Mozilla의 버그 참조를 참조하십시오 . 또한 History API 도입에 관한 Opera 는 title 매개 변수를 사용 하지 않았으며 여전히 사용하지 않을 것이라고 말했다 .
현재 history 항목의 제목 인 pushState 및 replaceState의 두 번째 인수는 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 사양은 초안 일 뿐이며 브라우저가 다르게 구현할 수 있습니다. 예를 들어 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));답변
예를 봐
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;
답변
두 번째 인수 Title 은 페이지 제목을 의미하지 않습니다. 해당 페이지의 상태에 대한 정의 / 정보에 대한 것입니다.
그러나 onpopstate 이벤트를 사용하여 제목을 변경하고 제목 이름을 두 번째 인수가 아닌 객체로 전달 된 첫 번째 매개 변수의 속성으로 전달할 수 있습니다
참조 :
http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
답변
MDN History doc 에 따르면
두 번째 논거는 현재로서는 사용되지 않을 미래를위한 것이라고 분명히 언급되어 있습니다. 두 번째 주장은 웹 페이지 제목을 다루는 것이 맞지만 현재는 모든 주요 브라우저에서 무시됩니다.
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);
}