새로고침 없이 URL을 동적으로 변경하는 방법

새로고침 없이 URL을 동적으로 변경하는 방법

이 질문에는 이미 답변이 있습니다.

페이지를 새로고침하지 않고 URL을 변경하려면 어떻게 해야 하나요? (20개의 답변)

닫힘4년 전에요.

네, 이것이 제가 하려는 것입니다(Google도 대부분 이 기능을 하고 있다고 생각합니다).

시나리오 A:

페이지 내/Main_Page3개의 섹션이 있다고 칩시다.사용자가 섹션 A의 "링크"를 클릭하면section A의 콘텐츠는 AJAX를 통해 로드되어 페이지에 삽입됩니다.

시나리오 B:

언제/Main_Page/Section_A로딩되어 거의 같은 페이지로 이동합니다(시나리오 A와 같음)./Main_Page로딩Section A이전과 같이 AJAX 경유.

---

문제:

동일한 페이지가 2개 있지만 URL이 다릅니다(첫 번째 경우 이 페이지는/Main_Page두 번째 단계에서는/Main_Page/Section_A).

하고 싶은 일:

• 시나리오 A에서는 로드 후Section A(브라우저 주소창에) 표시되는 URL이/Main_Page/Section_A리다이렉트나 페이지 새로고침 등을 하지 않고 (또는 그 이외의 것을) 사용할 수 있습니까?

History API를 구현하면 문제를 해결할 수 있습니다.특히 메서드를 사용하면 문제를 해결할 수 있습니다.MDN에서 읽을 것을 권장합니다.또한 History.js라는 올인원솔루션이 있어x 브라우저를 쉽게 구현할 수 있습니다(URL 해시에 폴백됩니다).#브라우저가 지원하지 않는 경우)

다음은 예를 제시하겠습니다.

history.pushState('', 'New Page Title', newHREF);

충분히 흥분되지 않았나요?이 데모에서는, 실장을 재촉할 수 있습니다.

방금 튜토리얼을 찾았는데 효과가 있었어요

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

위 코드는 http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/에서 받았습니다.

언급URL : https://stackoverflow.com/questions/11932869/how-to-dynamically-change-url-without-reloading