javascript - 현재 - 페이지 url 확인




페이지를 다시로드하지 않고 URL 수정 (13)

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

가능한 경우 # hash 앞에 있는 부분에 액세스하려고합니다.

도메인 의 부분 만 변경하면되므로 도메인 간 정책을 위반하는 것과 같지 않습니다.

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

HTML 5 History API의 history.pushState() 사용

자세한 내용은 링크를 참조하십시오. HTML5 기록 API


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

parent.location.hash = "hello";

과:

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

이 메소드는 페이지를 다시로드하지만 HTML5는 history.pushState(page, caption, replace_url) 다시로드하지 않아야하는 history.pushState(page, caption, replace_url) 를 도입했습니다.


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

거의 1 년이 지났습니다. History.js는 성장하고 더 안정적이고 크로스 브라우저가되었습니다. 이제 HTML5 전용 및 많은 HTML4 전용 브라우저에서 기록 상태를 관리하는 데 사용할 수 있습니다. 이 데모에서는 어떻게 작동하는지 (예 : 기능 및 한계를 시험해 볼 수 있음)의 예를 볼 수 있습니다.

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

마지막으로, 해시 (및 hashbangs) 사용에 관한 문제가 무엇인지 포괄적으로 설명하려면 Benjamin Lupton 이이 링크 를 확인하십시오.


URL 조각을 변경하는 것이 아니라면 loong ( window.location 또는 document.location )을 변경하면 해당 새 URL에 대한 요청이 발생합니다. URL을 변경하면 URL이 변경됩니다.

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


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

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

이렇게하면 뒤로 버튼 기능이 중단됩니다. 이는 이미지 갤러리와 같은 일부 인스턴스에서 필요할 수 있습니다 (뒤로 버튼이 갤러리 인덱스 페이지로 돌아가는 대신보기 이미지 각각을 통해 뒤로 이동하여 각 이미지에 고유 한 URL 제공).


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

앵커 태그를 추가 할 수 있습니다. 나는 내 사이트 http://www.piano-chords.net/ 에서 이것을 사용하여 사람들이 페이지에서 무엇을 방문하는지 Google Analytics로 추적 할 수 있습니다. 앵커 태그를 추가 한 다음 추적하려는 페이지의 일부만 추가합니다.

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

여기 내 해결책은 : (newUrl 당신이 현재 하나를 대체하려는 새로운 URL입니다)

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

지금하려는 작업이 사용자가 페이지를 북마크 / 공유 할 수 있도록 허용하고 정확히 URL이 될 필요가 없으며 다른 용도로 해시 앵커를 사용하지 않는 경우 두 가지 방법으로이 작업을 수행 할 수 있습니다. 부분품; 위에서 언급 한 location.hash를 사용하고 홈 페이지에서 체크를 구현하고, 해시 앵커가있는 URL을 찾은 다음 후속 결과로 리디렉션합니다.

예를 들면 :

1) 사용자는 www.site.com/section/page/4

2) 사용자는 URL을 www.site.com/#/section/page/6 (해시 포함)으로 변경하는 작업을 수행합니다. 페이지에 올바른 내용을 페이지에로드 했으므로 해시와 별개로 사용자가 너무 혼란스럽지 않게합니다.

3) 사용자가이 URL을 다른 사람에게 전달하거나 북마크에 추가합니다.

4) 나중에 다른 사용자 또는 동일한 사용자가 www.site.com/#/section/page/6 이동합니다.

5) www.site.com/ 코드는 다음과 같이 사용자를 www.site.com/ 리디렉션합니다.

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

희망은 그것이 의미가 있습니다! 그것은 어떤 상황에 유용한 접근법입니다.


최신 브라우저와 HTML5 에는 창 history pushState 라는 메서드가 history . URL을 변경하고 페이지를로드하지 않고 기록을 페이지로 푸시합니다.

이렇게하면 3 가지 매개 변수를 취할 수 있습니다. 1) 상태 객체 2) 제목과 URL) :

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

이것은 URL을 변경하지만 페이지를 다시로드하지 않으며 페이지가 존재하는지 확인하지 않으므로 URL에 반응하는 일부 자바 스크립트 코드를 수행하면 이런 식으로 작업 할 수 있습니다.

또한 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 경우 # 을 변경할 수 있습니다. 해시 태그에 따라 SPA 를 수행하는 Angular 방법입니다 ...

변경 # 은 다음과 같이 아주 쉽습니다.

window.location.hash = "example";

당신은 이것을 다음과 같이 탐지 할 수 있습니다 :

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

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


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

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

확실한 이유 중 하나는 www.mysite.com 에 은행 로그인 페이지처럼 보이는 사이트를 작성하는 것입니다. 그런 다음 브라우저 url 바를 www.mybank.com 변경하십시오. 사용자는 www.mysite.com 실제로보고 있다는 사실을 전혀 모릅니다.


parent.location.hash = "hello";






friendly-url