ホームページ > 記事 > ウェブフロントエンド > HTML5 履歴 API の概要

HTML5 履歴 API の概要

jackloveオリジナル: 2018-06-11 10:08:531887ブラウズ

IHtml5 History API の概要

History はグローバル変数です。つまり、Window.history

プロパティとメソッドは次のとおりです:

Length: レコードの数歴史的なスタック。

back(): 前のページに戻ります。

forward(): 次のページに進みます。

go([デルタ]): デルタは数値です。0 または空の場合は、このページを更新します。正の場合は、[デルタ] ページに進み、負の場合は、 δページに戻ります。

HTML5 では、次の 2 つのメソッドが追加されています:

pushState(data, title, [,url]): 履歴スタックの先頭にレコードを挿入します。 data はオブジェクトまたは null で、ウィンドウの Popstate イベント (window.onpopstate) の state パラメーターとして渡されます。

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 と replaceState の使用:

<?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 中国語 Web サイトを参照してください。

HTML5 履歴 API の概要

関連記事