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

Question

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

부분에 액세스하고 싶습니다 ~ 전에 가능하면 # 해시.

부분 만 변경하면됩니다 ~ 후에 도메인, 그래서 나는 도메인 크로스 온도 정책을 위반하는 것과는 다릅니다.

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

Answer 1

이것은 이제 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 기사.

Answer 2

html5를 소개했습니다 history.pushState() 그리고 history.replaceState() 이력 항목을 각각 추가하고 수정할 수있는 방법.

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

이것에 대해 자세히 알아보십시오 여기

Answer 3

HTML5를 사용할 수도 있습니다 대체물 URL을 변경하고 싶지만 브라우저 기록에 항목을 추가하고 싶지 않은 경우 :

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

이것은 뒤로 버튼 기능을 '브레이크'합니다. 이는 각 이미지에 고유 한 URL을 제공하는 동안 이미지 갤러리 (뒤로 버튼이 갤러리 색인 페이지로 돌아갈 수 있도록 갤러리 색인 페이지로 돌아갈 수 있도록)와 같은 경우에 필요할 수 있습니다.

Answer 4

참고 : 당신이 an과 함께 일하는 경우 HTML5 브라우저 그러면이 답변을 무시해야합니다. 이것은 이제 다른 답변에서 볼 수 있듯이 가능합니다.

수정 방법이 없습니다 URL 페이지를 다시로드하지 않고 브라우저에서 URL은 마지막로드 된 페이지의 내용을 나타냅니다. 변경하면 (document.location) 그러면 페이지를 다시로드합니다.

분명한 이유 중 하나는 사이트를 작성합니다. www.mysite.com 은행 로그인 페이지처럼 보입니다. 그런 다음 브라우저 URL 막대를 변경하여 말합니다 www.mybank.com. 사용자는 실제로보고 있다는 것을 완전히 알지 못할 것입니다. www.mysite.com.

Answer 5

parent.location.hash = "hello";

Answer 6

다음은 내 솔루션입니다 (NewUrl은 현재 새로운 URL로 교체하려는 새로운 URL) :

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

Answer 7

HTML5 대체물은 Vivart 및 GEO1701이 이미 언급 한 바와 같이 답입니다. 그러나 모든 브라우저/버전에서 지원되는 것은 아닙니다.history.js HTML5 상태 기능을 랩핑하고 HTML4 브라우저에 대한 추가 지원을 제공합니다.

Answer 8

현대에서 브라우저 및 HTML5,라는 메소드가 있습니다 pushState 창에 history. 그러면 URL을 변경하고 페이지를로드하지 않고 기록으로 밀어냅니다.

이렇게 사용할 수 있습니다. 1) 상태 객체 2) 제목 및 URL) : 3 매개 변수가 필요합니다.

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가 사용하는 방식입니다 온천 해시 태그에 따르면 ...

바꾸다 # 매우 쉽습니다.

window.location.hash = "example";

다음과 같이 감지 할 수 있습니다.

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

Answer 9

html5 전에 우리는 다음을 사용할 수 있습니다.

parent.location.hash = "hello";

그리고:

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

이 방법은 귀하의 페이지를 다시로드하지만 HTML5는 다음을 도입했습니다. history.pushState(page, caption, replace_url) 페이지를 다시로드해서는 안됩니다.

Answer 10

사용자가하려는 것은 사용자가 페이지를 북마크/공유 할 수 있도록 허용하고 정확히 올바른 URL이 될 필요가 없으며 다른 것에 해시 앵커를 사용하지 않으면 두 가지 로이 작업을 수행 할 수 있습니다. 부속; 위에서 논의한 후 홈 페이지에서 확인을 구현하여 해시 앵커가있는 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) 코드 켜짐 www.site.com/ 사용자를 리디렉션합니다 www.site.com/section/page/6, 다음과 같은 것을 사용합니다.

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

그것이 말이되기를 바랍니다! 일부 상황에 유용한 접근법입니다.

Answer 11

위치의 변경 사항 (어느 쪽이든 window.location 또는 document.location) URL 조각 만 변경하는 것이 아니라면 해당 새 URL에 대한 요청이 발생합니다. URL을 변경하면 URL을 변경합니다.

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

Answer 12

아래는 페이지를 다시로드하지 않고 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');

Answer 13

앵커 태그를 추가 할 수 있습니다. 나는 이것을 내 사이트에서 사용합니다 http://www.piano-chords.net/ Google 웹 로그 분석을 통해 사람들이 페이지에서 방문하는 것을 추적 할 수 있습니다.

앵커 태그를 추가 한 다음 추적하려는 페이지의 일부를 추가합니다.

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

Answer 14

Thomas Stjernegaard Jeppesen이 지적했듯이 history.js 사용자가 AJAX 링크 및 앱을 통해 탐색하는 동안 URL 매개 변수를 수정합니다.

그 대답 이후 거의 1 년이 지났고, 역사 .JS는 성장하여 더 안정되고 교차 브라우저가되었습니다. 이제 많은 HTML4 전용 브라우저뿐만 아니라 HTML5 호환의 이력 상태를 관리하는 데 사용할 수 있습니다. 이 데모에서 당신은 그것이 어떻게 작동하는지에 대한 예를 볼 수 있고 (기능과 한계를 시도 할 수있을뿐만 아니라 볼 수 있습니다.

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

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

Answer 15

사용 history.pushState() HTML 5 이력 API에서.

참조 HTML5 이력 API 자세한 사항은.

Answer 16

사용:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

블로그 게시물에서 볼 수 있습니다 페이지를 다시로드하지 않고 브라우저의 URL을 업데이트하십시오.

Answer 17

사용 window.history.pushState("object or string", "Title", "/new-url"), 그러나 여전히 새 URL 요청을 서버로 보냅니다.

Answer 18

악의적 인 일을하지 않는다고 가정하면 자신의 URL에하고 싶은 모든 것이 htaccess.