h5의 History.pushState() 사용 예에 ​​대한 자세한 소개

HTML 파일에서 History.pushState() 메소드는 브라우저 기록에 상태를 추가합니다.

pushState()는 상태 객체, 제목(현재는 무시됨), 선택적 URL 주소 등 세 가지 매개변수를 사용합니다. 이 세 가지 매개변수는 아래에서 자세히 검토됩니다.

상태 객체 - 상태 객체는 pushState() 메소드에 의해 생성된 기록과 관련된 JS 객체입니다. 사용자가 새로운 상태로 이동하면 popstate 이벤트가 트리거됩니다. 이벤트의 상태 속성에는 기록의 상태 개체가 포함되어 있습니다. (번역자 주: 간단히 말해서 JSON 문자열을 저장하고 popstate 이벤트에서 사용할 수 있습니다.) 상태 객체는 직렬화할 수 있는 모든 것이 될 수 있습니다. Firefox는 이러한 개체를 사용자의 디스크에 저장하므로 사용자가 브라우저를 다시 시작한 후에 이러한 상태 개체가 복원되므로 상태 개체의 직렬화된 표현에 최대 문자열 크기 640k를 적용합니다. 640k보다 큰 직렬화된 표현이 있는 상태 객체를 pushState() 메서드에 전달하면 이 메서드는 예외를 발생시킵니다. 더 많은 공간이 필요한 경우 sessionStorage 또는 localStorage를 사용하는 것이 좋습니다.

title — 이 매개변수는 이제 Firefox에서 무시되며 향후 사용될 수 있습니다. 향후 변경 가능성을 허용하려면 빈 문자열을 전달하는 것이 안전합니다. 물론 전환하려는 상태에 대한 짧은 제목을 전달할 수도 있습니다. (번역자 주: 현재 대부분의 브라우저는 이 매개변수를 지원하거나 무시하지 않습니다. 대신 null을 사용하는 것이 가장 좋습니다.)

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

참고: Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)에서 Gecko 5.0(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)까지 전송된 개체는 JSON을 사용하여 직렬화됩니다. Gecko 6.0(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)부터는 구조화된 복제 알고리즘을 사용하여 개체를 직렬화합니다. 이를 통해 보다 다양한 개체를 전송할 수 있습니다.

어떤 경우에는 pushState를 호출하는 것이 window.location = "#foo"를 설정하는 것과 동일합니다. 이 경우 두 작업 모두 현재 페이지와 관련된 다른 기록 레코드를 생성하고 활성화합니다.

그러나 pushState()에는 다른 장점이 있습니다.

새 URL은 현재 URL과 동일한 출처에 있는 모든 주소일 수 있습니다. 반대로 window.location을 설정하면 해시만 변경하지 않는 한 동일한 페이지에 유지됩니다.

필요하지 않은 경우 URL을 변경할 수 없으며 대신 다음을 설정합니다. window.location "#foo"로 설정하면 현재 해시가 #foo가 아닌 경우에만 새 기록 항목이 생성됩니다.

임의의 데이터를 새 기록 항목과 연결할 수 있습니다. 해시 기반 접근 방식에서는 관련 데이터의 모든을 짧은 문자열으로 인코딩해야 합니다. 모든 데이터를 새 기록 레코드에 연결할 수 있습니다. 해시 기반 접근 방식을 사용하면 모든 관련 데이터를 짧은 문자열로 인코딩합니다.

새 URL이 이전 URL과 해시만 다른 경우에도 pushState() 메서드는 결코 hashchange 이벤트를 활성화하지 않습니다.

XUL에서는 특별한 XUL 요소를 생성합니다.

다른 문서에서는 빈 URI 네임스페이스 가 생성됩니다.

구문 편집

history.pushState(state, title, url);

샘플 편집

새로 생성됨 상태, 제목, URL별로 설정된 브라우저 기록.

JavaScript

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';var url = 'hello-world.html';
history.pushState(state, title, url);

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法（一）

3. js中的window.history的用法（二）

4. 深入了解h5中history特性--pushState、replaceState

5. h5中History API 对Web应用的影响

위 내용은 h5의 History.pushState() 사용 예에 ​​대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!