새로 고치지 않고 현재 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 주소는 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

event가 실행되지 않습니다.

또 한 가지 주목할 점은 Google Chrome과

Firefox는 페이지가 처음 열릴 때 이상하게 onpopstate 이벤트를 트리거하는 반면 Firefox는 다르게 반응한다는 것입니다.

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