[javascript] 페이지를 다시로드하지 않고 URL을 수정하려면 어떻게합니까?

JAVASCRIPT / 글쓴이

페이지를 다시로드하지 않고 현재 페이지의 URL을 수정할 수있는 방법이 있습니까?

가능한 경우 # 해시 전에 해당 부분에 액세스하고 싶습니다 .

도메인 뒤 부분 만 변경하면 되므로 도메인 간 정책을 위반하는 것은 아닙니다.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

답변

이제 Chrome, Safari, Firefox 4 이상 및 Internet Explorer 10pp4 이상에서 수행 할 수 있습니다!

자세한 내용은이 질문에 대한 답변을 참조하십시오.
해시하거나 페이지를 다시로드하지 않고 새 URL로 주소 표시 줄 업데이트

예:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

그런 다음 window.onpopstate뒤로 / 앞으로 단추 탐색을 감지하는 데 사용할 수 있습니다 .

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

브라우저 기록 조작에 대한 자세한 내용은 이 MDN 문서를 참조하십시오 .

답변

HTML5에는 history.pushState()및 history.replaceState()기록을 추가하고 수정할 수 있는 및 메소드가 도입되었습니다 .

window.history.pushState('page2', 'Title', '/page2.php');

여기 에서 자세한 내용을 읽으 십시오

답변

URL을 변경하고 싶지만 브라우저 기록에 항목을 추가하지 않으려 는 경우 HTML5 replaceState를 사용할 수도 있습니다 .

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

이것은 뒤로 버튼 기능을 ‘깨뜨릴’것입니다. 각 이미지에 고유 한 URL을 제공하면서 이미지 갤러리 (예 : 각각의 모든 이미지를 뒤로 이동하는 대신 뒤로 단추가 갤러리 인덱스 페이지로 돌아 가기를 원함)와 같은 일부 경우에 필요할 수 있습니다.

답변

내 해결책은 다음과 같습니다 (newUrl은 현재 URL로 바꾸려는 새 URL입니다).

history.pushState({}, null, newUrl);

답변

참고 : HTML5 브라우저를 사용하는 경우이 답변을 무시해야합니다. 이것은 다른 답변에서 볼 수 있듯이 가능합니다.

페이지를 다시로드하지 않고 브라우저 에서 URL 을 수정할 수있는 방법이 없습니다 . URL은 마지막으로로드 된 페이지를 나타냅니다. 변경하면 ( document.location) 페이지가 다시로드됩니다.

명백한 이유 중 하나 www.mysite.com는 은행 로그인 페이지처럼 보이는 사이트를 작성하는 것입니다. 그런 다음 브라우저 URL 표시 줄을으로 변경하십시오 www.mybank.com. 사용자는 자신이 실제로보고 있음을 완전히 알지 못합니다 www.mysite.com.

답변

parent.location.hash = "hello";

답변

최신 브라우저 및 HTML5 에는 pushState창에서 호출되는 메소드 가 있습니다 history. 그러면 URL이 변경되어 페이지를로드하지 않고 기록으로 푸시됩니다.

다음과 같이 사용할 수 있습니다. 1) 상태 객체 2) 제목과 URL) :

window.history.pushState({page: "another"}, "another page", "example.html");

URL은 변경되지만 페이지를 다시로드하지는 않습니다. 또한 페이지가 존재하는지 확인하지 않으므로 URL에 반응하는 JavaScript 코드를 사용하면 이와 같이 작업 할 수 있습니다.

또한 history.replaceState()새로운 기록을 만드는 대신 현재 기록을 수정한다는 점을 제외하고는 정확히 동일한 기능을 수행합니다!

또한 history.pushState존재 여부를 확인하는 함수를 만들고 다음과 같이 나머지를 계속 수행 할 수 있습니다 .

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

또한 당신은 변경할 수 있습니다 #에 대한 <HTML5 browsers페이지를 다시로드하지 것이다. 이것이 Angular가 해시 태그에 따라 SPA 를 수행하는 방식입니다 …

다음 #과 같이 변경하는 것은 매우 쉽습니다.

window.location.hash = "example";

그리고 당신은 이것을 다음과 같이 감지 할 수 있습니다 :

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}