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

페이지를 다시로드하지 않고 현재 페이지의 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);
}

HTML5 replaceState는 Vivart와 geo1701에서 이미 언급 한대로 답입니다. 그러나 일부 브라우저 / 버전에서는 지원되지 않습니다. History.js는 HTML5 상태 기능을 감싸고 HTML4 브라우저에 대한 추가 지원을 제공합니다.

HTML5 이전에는 다음을 사용할 수 있습니다.

parent.location.hash = "hello";

과:

window.location.replace("http:www.example.com");

이 방법을 사용하면 페이지를 새로 고침 할 수 있지만 HTML5에서는 페이지를 새로 history.pushState(page, caption, replace_url)고침해서는 안됩니다.

당신이하려는 일이 사용자가 페이지를 북마크 / 공유 할 수있게하고 정확하게 올바른 URL 일 필요는 없으며 다른 용도로 해시 앵커를 사용하지 않는 경우 두 가지로 할 수 있습니다 부속; 위에서 설명한 location.hash를 사용한 다음 홈 페이지에서 검사를 구현하여 해시 앵커가있는 URL을 찾은 다음 후속 결과로 리디렉션합니다.

예를 들어 :

1) 사용자가 켜져 있습니다 www.site.com/section/page/4

2) 사용자는 URL을 www.site.com/#/section/page/6(해시로) 변경하는 작업을 수행 합니다. 페이지 6에 올바른 콘텐츠를 페이지에로드했다고 가정하면 해시와는 별도로 사용자가 방해받지 않습니다.

3) 사용자가이 URL을 다른 사람에게 전달하거나 책갈피에 추가

4) 다른 사람 또는 나중에 같은 사용자가 www.site.com/#/section/page/6

5) Code on www.site.com/은 www.site.com/section/page/6다음과 같이 사용자를로 리디렉션합니다 .

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

이해가 되길 바랍니다! 일부 상황에서는 유용한 접근 방식입니다.

다음은 페이지를 다시로드하지 않고 URL을 변경하는 기능입니다. HTML5에서만 지원됩니다.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

URL 조각 만 변경하지 않는 경우 로션 ( window.location또는 document.location)을 변경하면 새 URL에 대한 요청이 발생합니다. URL을 변경하면 URL이 변경됩니다.

현재 사용중인 URL이 마음에 들지 않으면 Apache의 mod_rewrite 와 같은 서버 측 URL 재 작성 기술을 사용하십시오.

앵커 태그를 추가 할 수 있습니다. 내 사이트에서이를 사용하여 사람들이 페이지에서 어떤 방문자를 방문하는지 Google 웹 로그 분석으로 추적 할 수 있습니다.

앵커 태그를 추가 한 다음 추적하려는 페이지 부분을 추가하십시오.

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Thomas Stjernegaard Jeppesen이 지적했듯이 History.js를 사용할 수 있습니다. 사용자가 Ajax 링크 및 앱을 탐색하는 동안 를 하여 URL 매개 변수를 수정할 .

그 대답 이후 거의 1 년이 지났고 History.js는 점점 더 안정적이고 브라우저 간이되었습니다. 이제 HTML5 호환 브라우저와 많은 HTML4 전용 브라우저에서 기록 상태를 관리하는 데 사용할 수 있습니다. 이 데모에서는 작동 방식의 예와 기능 및 한계를 시험해 볼 수 있습니다.

이 라이브러리를 사용하고 구현하는 방법에 대한 도움이 필요하면 데모 페이지의 소스 코드를 살펴 보는 것이 좋습니다. 매우 쉬운 방법입니다.

마지막으로 해시 (및 해시 뱅) 사용과 관련된 문제에 대한 포괄적 인 설명을 보려면 Benjamin Lupton 의이 링크 를 확인하십시오 .

history.pushState()HTML 5 히스토리 API에서 사용하십시오 .

자세한 내용은 HTML5 히스토리 API 를 참조하십시오.

이 아름답고 간단한 기능을 사용하여 응용 프로그램의 어느 곳에서나 사용할 수 있습니다.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

URL을 편집 할 수있을뿐만 아니라 URL과 함께 제목을 업데이트 할 수 있습니다.

모두에게 큰 도움이되었습니다.