본 글은 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);
window.history.go(1);
window.history.length;
2. 기록 기록 지점 수정
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");
2. 현재 기록 지점 교체
업데이트하려는 경우에는 replacementState() 메서드를 사용하는 것이 특히 적합합니다.
3. 기록 기록 지점 모니터링
// 当前的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} }
event가 실행되지 않습니다.
또 한 가지 주목할 점은 Google Chrome과Firefox는 페이지가 처음 열릴 때 이상하게 onpopstate 이벤트를 트리거하는 반면 Firefox는 다르게 반응한다는 것입니다.
위 내용은 새로 고치지 않고 현재 URL을 변경하는 HTML5의 pushstate 및 popstate 작업 기록에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!