source

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

manysource 2022. 12. 24. 17:46

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

페이지를 새로고침하지 않고 javascript(도메인이 아닌 경로)로 주소바를 갱신하는 방법을 chrome(dev channel)가 실장하는 것을 꿈꿨거나, 실제로 그렇게 하고 있었습니다.

하지만 제가 읽은 기사를 찾을 수가 없어요.

내가 미쳤나? 아니면 (Chrome으로) 이걸 할 수 있는 방법이 있나?

p.s. window.location을 말하는게 아닙니다.해시 등위의 내용이 존재한다면 이 질문에 대한 답변은 사실이 아닐 것입니다.

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

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

pushState/replaceState/popstate(HTML5 History API)에 대한 자세한 내용은 MDN 문서를 참조하십시오.

TL;DR, 다음 작업을 수행할 수 있습니다.

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

기본적인 조작 방법에 대해서는, 「페이지를 새로고침 하지 않고 URL수정한다」의 회답을 참조해 주세요.

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

document.location.hash = 'lookAtMeNow';

전체 URL 변경 중. Chrome, Firefox, IE10+

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

위에서는 새로운 엔트리가 이력에 추가되므로 [Back]버튼을 눌러 이전 상태로 돌아갈 수 있습니다.기록에 새 항목을 추가하지 않고 URL을 변경하려면 사용

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

지금 콘솔에서 실행해 보세요!

Pushstate를 지원하지 않는 브라우저도 검출할 수 있도록 Davids 응답 업데이트:

if (history.pushState) {
  window.history.pushState(stateObj, "title", "url");
} else {
  window.history.replaceState(stateObj, "title**", 'url');
  // ** It seems that current browsers other than Safari don't support pushState
  // title attribute. We can achieve the same thing by setting it in JS.
  document.title = "Title";
}

스테이트 오브지

state 객체는 replaceState 메서드에 전달된 이력 엔트리와 관련된 JavaScript 객체입니다.상태 개체는 null일 수 있습니다.

직함

현재 대부분의 브라우저는 이 파라미터를 무시하지만 나중에 사용할 수도 있습니다.여기에 빈 문자열을 전달하면 메서드가 나중에 변경되지 않도록 안전합니다.또는 주(州)의 짧은 제목을 전달할 수도 있습니다.

url 선택적.

이력 엔트리의 URL.새 URL은 현재 URL과 동일한 원본이어야 합니다. 그렇지 않으면 replaceState가 예외를 발생시킵니다.

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

언급URL : https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page