해시없이 새 URL로 주소 표시 줄 업데이트 또는 페이지 다시로드


643

페이지를 다시로드하지 않고 자바 스크립트 (도메인이 아닌 경로)를 통해 주소 표시 줄을 업데이트하는 방법을 구현하는 크롬 (dev 채널)에 대한 꿈을 꾸었거나 실제로이 작업을 수행했습니다.

그러나 내가 읽은 것으로 생각 되는 기사를 찾을 수 없습니다 .

내가 미쳤거나 이것을 할 수있는 방법이 있습니까 (Chrome에서)?

추신 : 나는 window.location.hash, et al.에 대해 이야기하고 있지 않습니다. 위의 내용이 존재 하면이 질문에 대한 답 은 사실이 아닙니다.



1
@tobiaskienzler 그 질문이 2009 년에 원래 다시 제기되었을 때, 그것은 불가능했습니다.
David Murdoch

3
당연히 아니지. 그러나 지금은 질문 이 똑같은 것을 요구합니다. 다른 사람이 오래된 답변을 받아 들인 것은 부끄러운 일입니다 (당신이 알았습니다). "원본"이 더 오래되어야한다고 말한 사람은 아무도 없었습니다. 실제로 선례가 있습니다.
Tobias Kienzler

@ tobiaskienzler, 다른 질문에는 오래된 대답이 없습니다.
David Murdoch

2
@TobiasKienzler 6 살짜리 질문인데 왜이 질문에 귀찮게해야합니까? 놀라운 답변을 즐기고 응용 프로그램에서 구현하십시오. 6 년 동안 수천 명의 SO 사용자가 놀라운 질문이라는 데 동의했습니다. 그대로 두십시오.
Imam Assidiqqi

답변:


874

이제 대부분의 "현대"브라우저에서이 작업을 수행 할 수 있습니다!

다음은 내가 읽은 원본 기사입니다 (2010 년 7 월 10 일 게시). HTML5 : 페이지를 새로 고치지 않고 브라우저 URL 변경 .

pushState / replaceState / popstate (일명 HTML5 히스토리 API)에 대한 자세한 내용은 MDN 문서를 참조하십시오 .

TL; DR, 당신은 이것을 할 수 있습니다 :

window.history.pushState("object or string", "Title", "/new-url");

기본적인 사용법 은 페이지다시로드하지 않고 URL 수정에 대한 답변을 참조하십시오 .


3
아, 기능은 WebKit에 있으며 몇 개월 전에 < bugs.webkit.org/show_bug.cgi?id=36152 >로 제공되었습니다. 좋은 발견!
oldestlivingboy

6
트리 탐색
Valerij

1
@Vprimachenko : 응. 그리고 그들은 때때로 내 뒤로 버튼을 끊습니다.
David Murdoch

이제 Chrome, Safari, FF4 + 및 IE10pp3 +에서 수행 할 수 있습니다! (데이비드 머독의 대답에서하는 stackoverflow.com/questions/824349/... )
자크 Lysobey에게

11
팁 : 이러한 기능을 사용하여 상대 경로를 사용할 수도 있습니다 (예 : ../new-url또는 ../../new-url. Chrome에서 최소한 기대하는 기능을하는 것 같습니다.
Mahn

156

해시 이후의 내용 만 변경-이전 브라우저

document.location.hash = 'lookAtMeNow';

전체 URL 변경 크롬, 파이어 폭스, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

위의 내용은 기록에 새 항목을 추가하므로 뒤로 버튼을 눌러 이전 상태로 이동할 수 있습니다. 기록에 새 항목을 추가하지 않고 URL을 제자리에 변경하려면

history.replaceState('data to be passed', 'Title of the page', '/test');

지금 콘솔에서 이것을 실행하십시오!


13
replaceState원래 응답을 확장 해 주셔서 감사합니다.
Choylton B. Higginbottom

'도메인과 프로토콜은 원본과 동일해야합니다!' 이렇게하면 일부 낚시 사이트가 주소 표시 줄 URL을 변경하지 못하게됩니다.
Rick

3
이 함수에는 절대 URL을 전달해서는 안됩니다. 그렇다면 현재 구성표, 호스트 및 포트에서 동적으로 빌드해야 할 가능성이 높습니다. 이는 상대 URL ( "foo.html"또는 "/foo.html)로 만들 때 많은 작업입니다. ") 브라우저가 처리하도록합니다.
DimeCadmium

1
@DimeCadmium 좋은 단순화. 업데이트되었습니다.
Pawel

history.replaceStateff 66.0b1의 역사에 추가
azzamsa

33

pushstate를 지원하지 않는 브라우저를 감지하기 위해 Davids의 답변으로 업데이트하십시오.

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

9
document.location.href가 페이지를
새로

1
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

3
이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자에게 질문에 대한 답변을 제공하고 있으며 해당 사람들이 귀하의 코드 제안 이유를 모를 수도 있습니다.
MaxiMouse

@MaxiMouse 당신의 sugerence에 감사드립니다, 나는 그것을 명심할 것입니다.
Kevin Mendez
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.