pushstate 및 popstate가 URL을 작동하는 방법

이번에는 pushstate 및 popstate URL 작동 방법과 pushstate 및 popstate URL 작동 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. window.history 이해

window.history는 사용자가 적극적으로 생성하고 javascript스크립트에 의해 제어되는 전역 개체인 window 개체의 기록을 나타냅니다. 창 개체는 history 개체를 통해 브라우저 기록에 대한 액세스를 제공합니다. 이는 기록에서 자유롭게 앞뒤로 이동할 수 있는 몇 가지 매우 유용한 메서드와 속성을 노출합니다.

1. 기록에서 앞으로 및 뒤로

기록으로 돌아가려면 다음을 수행할 수 있습니다.

window.history.back();

이는 사용자가 브라우저의 뒤로 버튼을 클릭하는 것과 같습니다.

마치 다음과 같이 브라우저에서 앞으로 버튼을 클릭하는 것처럼 앞으로 이동할 수 있습니다.

 window.history.forward();

2. 지정된 기록 지점으로 이동

현재 페이지 위치를 기준으로 값을 지정하면 다음과 같은 작업을 수행할 수 있습니다. go() 메소드를 사용하여 현재 세션 기록에서 페이지를 로드합니다(현재 페이지 위치 index 값은 0, 이전 페이지는 -1, 다음 페이지는 1).

한 페이지 뒤로 이동하려면(back() 호출과 동일):

 window.history.go(-1);

한 페이지 앞으로 이동하려면(forward() 호출과 동일):

window.history.go(1);

마찬가지로 매개변수 "2"를 전달하면 2페이지 앞으로 이동할 수 있습니다. 기록 포인트. 길이 속성 값을 확인하여 기록 스택에 레코드 포인트가 몇 개인지 확인할 수 있습니다.

window.history.length;

2. 기록 레코드 포인트 수정

HTML5의 새로운 API는 window.history를 확장하여 기록 레코드 포인트를 더 많이 만듭니다. 열려 있는 . 현재 이력 기록 포인트를 저장하고, 현재 이력 기록 포인트를 교체하고, 이력 기록 포인트를 모니터링할 수 있습니다. 다음은 각각에 대한 간략한 설명입니다.

1. 현재 기록 지점 저장

저장 방법은 배열 푸시(Array.push())와 유사합니다. 예를 들어

// 当前的url为：http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

는 pushState를 실행합니다. 이 방법을 사용하면 해당 페이지의 URL 주소는 http://qianduanblog.com/post-1.html이 됩니다.

2. 현재 기록 포인트 교체

window.history.replaceState는 window.history.pushState와 유사합니다. 차이점은 replacementState가 window.history에 새 기록 포인트를 추가하지 않는다는 점이며 그 효과는 다음과 같습니다. window.location.replace(url)는 기록 기록 지점에 새 기록 지점을 추가하지 않습니다. replacementState() 메서드는 일부 사용자 작업에 대한 응답으로 현재 기록 항목의 상태 개체나 URL을 업데이트하려는 경우에 특히 적합합니다.

3. 모니터링 기록 포인트

모니터링 기록 포인트는 URL 변경을 모니터링하는 것으로 직관적으로 간주될 수 있지만 URL의 해시 부분을 무시하고 URL의 해시 부분을 모니터링합니다. onhashchange라는 새로운 API가 있습니다. I 이 방법과 크로스 브라우저 호환 솔루션은 블로그에도 언급되어 있습니다. window.onpopstate를 통해 URL의 변경 사항을 모니터링하고 위에서 언급한 json 개체인 기록 기록 지점에 저장된 상태 개체를 얻을 수 있습니다.

// 当前的url为：http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到：http://qianduanblog.com/index.html
    // 获得的json为null
    // 再点击一次前进到：http://qianduanblog.com/post-1.html
    // 获得json为{time:1369647895656}
}

javascript 스크립트가 window.history를 실행한다는 점은 주목할 가치가 있습니다. .pushState 및 window.history.replaceState는 onpopstate 이벤트를 트리거하지 않습니다.

또 한 가지 주목해야 할 점은 Google Chrome과 Firefox는 페이지가 처음 열릴 때 이상하게도 onpopstate 이벤트를 트리거하는 반면 Firefox는 다르게 반응한다는 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

새로 고침 없이 현재 URL의 코드를 변경하는 방법

H5의 LocalStorage는 어떻게 새로 고침 값을 로컬에 저장합니까?

위 내용은 pushstate 및 popstate가 URL을 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!