새로 고치지 않고 현재 URL 코드 예제를 변경하는 HTML5의 pushstate 및 popstate 작업 기록에 대한 자세한 설명

본 글은 HTML5의 pushstate와 popstate 작업 내역을 주로 소개하며, 새로고침 없이 현재 url을 변경하는 관련 내용은

1. window.history 이해

window.history는 사용자가 적극적으로 생성하고

javascript를 허용하는 window 객체의 기록을 나타냅니다. 스크립트 전역 개체를 제어합니다. 창 개체는 기록 개체를 통해 브라우저 기록에 대한 액세스를 제공합니다. 히스토리에서 앞뒤로 자유롭게 이동할 수 있는 몇 가지 매우 유용한 방법과 속성을 노출합니다.

1. 역사에서 앞으로 및 뒤로

역사로 돌아가려면 다음을 수행할 수 있습니다.

window.history.back();

이는 사용자가 브라우저의 뒤로

버튼을 클릭하는 것과 같습니다.

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

 window.history.forward();

2. 지정된 히스토리 포인트

go() 메소드를 사용하면 현재 페이지 위치(현재 페이지 위치

인덱스 값은 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()), window.history에 기록 레코드 지점을 추가합니다. 예:

// 当前的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와 유사하지만 차이점은 교체 상태가 그렇지 않다는 것입니다. 창에서 .history에 새 기록 지점을 추가하는 효과는 기록 기록 지점에 새 기록 지점을 추가하지 않는 window.location.replace(url)와 유사합니다. 일부 사용자 작업에 대한 응답으로 현재 기록 항목의 상태 개체나 URL을

업데이트

하려는 경우에는 replacementState() 메서드를 사용하는 것이 특히 적합합니다.

3. 기록 기록 지점 모니터링

기록 기록 지점 모니터링은 직관적으로 URL 변경 모니터링으로 간주될 수 있지만 URL

은 무시됩니다. hash

부분은 URL의 해시 부분을 모니터링합니다. HTML5에는 onhashchange라는 새로운 API가 있으며 내 블로그에서도 이 방법과 브라우저 간 호환 솔루션에 대해 설명합니다. 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는 다르게 반응한다는 것입니다.

위 내용은 새로 고치지 않고 현재 URL 코드 예제를 변경하는 HTML5의 pushstate 및 popstate 작업 기록에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!