집 > 기사 > 웹 프론트엔드 > HTML5 히스토리 API 소개

HTML5 히스토리 API 소개

jacklove원래의: 2018-06-11 10:08:531930검색

IHtml5 History API 소개

History는 전역 변수입니다. 즉, Window.history

속성과 메서드는 다음과 같습니다.

Length: 역사적 스택.

back(): 이전 페이지로 돌아갑니다.

foward(): 다음 페이지로 이동합니다.

go([delta]): delta는 숫자입니다. 0이거나 비어 있으면 이 페이지를 새로 고치세요. 양수이면 [delta] 페이지로 이동합니다. 음수이면 [델타] 페이지로 돌아갑니다.

HTML5는 다음 두 가지 메서드를 추가합니다.

pushState(data, title, [,url]): 기록 스택 상단에 레코드를 삽입합니다. data는 창의 popstate 이벤트(window.onpopstate)에서 상태 매개변수로 전달되는 개체 또는 null입니다.

title은 페이지 제목입니다. 현재 모든 브라우저는 이 매개변수를 무시합니다.

url은 페이지 URL이며, 작성되지 않은 경우 현재 페이지입니다.

replaceState(data, title, [,url])
: 현재 페이지의 기록을 변경합니다. 이 변경사항은 URL에 액세스하지 않습니다. replaceState()의 URL 매개변수는 현재 페이지의 프로토콜(예: HTTP, HTTPS) 및 도메인 이름과 정확히 동일해야 합니다(다른 하위 도메인 사용은 작동하지 않음)
현재 Safari 5.0+, Chrome에만 해당 8.0+, Firefox 4.0+ 및 iOS 4.2.1+를 지원합니다. 이전 브라우저와 호환되기를 원한다면 History.js를 사용해 볼 수 있으며 일부 버그도 수정됩니다.
pushState 및 replacementState 사용:

<?php
    $photo = isset($_GET[&#39;id&#39;])? $_GET[&#39;id&#39;] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>test</title>
  <script type="text/javascript">
  function go(c){
    document.title = &#39;test&#39; + c; //更改title
    window.history.pushState({&#39;title&#39;:&#39;test&#39;+c, &#39;photo&#39;:c}, &#39;test&#39;+c, &#39;test.php?id=&#39;+c); // 插入前一页历史记录
    window.history.replaceState({&#39;title&#39;:&#39;test&#39;+c, &#39;photo&#39;:c},&#39;test&#39;+c, &#39;test.php?id=&#39;+c);  // 更改当前历史记录
    document.getElementById("photo").src = c + &#39;.jpg&#39;;
  }
  window.onpopstate = function(obj){
    if(obj.state!=null){
        document.title = obj.state.title;  // 后退时更新title
        document.getElementById("photo").src = obj.state.photo + &#39;.jpg&#39;;
    }
  }
  </script>
 </head>
 <body>
  <p>
      <a href="javascript:void(0)" onclick="go(1)">page 1</a>
      <a href="javascript:void(0)" onclick="go(2)">page 2</a>
      <a href="javascript:void(0)" onclick="go(3)">page 3</a>
      <a href="javascript:void(0)" onclick="go(4)">page 4</a>
  </p>
  <p><img src="<?=$photo ?>.jpg" id="photo"></p>
 </body>
</html>

window.onpopstate 메소드:

window.onpopstate = function(event){
    alert(event.state);
}

이 글은 HTML5 히스토리 API 소개에 대한 내용이므로 php 중국어 사이트를 참고해주세요.

HTML5 히스토리 API 소개

관련 기사