[javascript] JavaScript를 사용하여 새 페이지를로드하지 않고 브라우저에서 URL을 변경하십시오.

jQuery 에는 jQuery-pusher 라는 브라우저의 URL을 변경하기위한 훌륭한 플러그인이 있습니다. 있습니다.

다음과 같이 JavaScript pushState와 jQuery를 함께 사용할 수 있습니다.

history.pushState(null, null, $(this).attr('href'));

예:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

JavaScript 만 사용 history.pushState()상태를 변경 한 후 생성 된 XMLHttpRequest 객체의 HTTP 헤더에서 사용되는 리퍼러를 변경하는 .

예:

window.history.pushState("object", "Your New Title", "/new-url");

pushState () 메소드 :

pushState()상태 개체, 제목 (현재 무시 됨) 및 URL (선택 사항)의 세 가지 매개 변수를 사용합니다. 이 세 가지 매개 변수 각각에 대해 자세히 살펴 보겠습니다.

1. state 객체 — state 객체는 JavaScript 객체로, 새로운 기록 항목과 연결됩니다.pushState() . 사용자가 새 상태로 이동할 때마다 popstate 이벤트가 시작되고 이벤트의 state 속성에 기록 항목의 상태 객체 복사본이 포함됩니다.

   상태 객체는 직렬화 할 수있는 모든 것이 될 수 있습니다. Firefox는 상태 객체를 사용자의 디스크에 저장하여 사용자가 브라우저를 다시 시작한 후 복원 할 수 있으므로 상태 객체의 직렬화 된 표현에 640k 문자의 크기 제한을 적용합니다. 직렬화 된 표현이 이것보다 큰 상태 객체를 전달하면pushState() 하면 메소드에서 예외가 발생합니다. 이보다 더 많은 공간이 필요한 경우 sessionStorage 및 / 또는 localStorage를 사용하는 것이 좋습니다.

2. 표제 — Firefox는 현재이 매개 변수를 무시하지만 나중에 사용할 수도 있습니다. 빈 문자열을 여기에 전달하면 나중에 메소드를 변경하지 않아도 안전합니다. 또는 이동중인 주에 짧은 제목을 전달할 수도 있습니다.

3. URL — 새 기록 항목의 URL은이 매개 변수로 제공됩니다. 브라우저는을 호출 한 pushState()후이 URL을로드하려고 시도하지 않지만, 예를 들어 사용자가 브라우저를 다시 시작한 후 나중에 URL로드를 시도 할 수 있습니다. 새로운 URL은 절대적 일 필요는 없습니다. 상대적인 경우 현재 URL을 기준으로 해결됩니다. 새 URL은 현재 URL과 동일한 출처 여야합니다. 그렇지 않으면 pushState()예외가 발생합니다. 이 매개 변수는 선택 사항입니다. 지정하지 않으면 문서의 현재 URL로 설정됩니다.

답변