html5 History API は、更新せずにアドレス バー URL を更新するように実装します。

歴史って面白いですね。以前のバージョンの HTML では、閲覧履歴の操作は非常に限られていました。どのような方法を使用できるかを行ったり来たりすることはできますが、私たちにできるのはそれだけです。

ただし、HTML 5 の History API を使用すると、ブラウザーの履歴をより適切に制御できます。たとえば、履歴レコードのリストにレコードを追加したり、更新がない場合にアドレス バーの URL を更新したりできます。

なぜ History API を導入するのですか?

この記事では、HTML 5 の History API の起源を理解します。これまでは、ページのコンテンツ、特にページにとって特に重要なコンテンツを変更するためにハッシュ値を使用することがよくありました。更新がないため、シングルページ アプリケーションの URL を変更することはできません。さらに、URL のハッシュ値を変更しても、ブラウザの履歴には影響しません。

現在、HTML 5 の History API を使用すると、これらはすべて簡単に実現できますが、単一ページのアプリケーションではハッシュを使用する必要がないため、追加の開発スクリプトが必要になる場合があります。また、SEO に配慮した方法で新しいアプリケーションを構築することもできます。さらに、帯域幅も減少しますが、それを証明するにはどうすればよいでしょうか?

この記事では、History API を使用してシングルページ アプリケーションを開発し、上記の問題を証明します。

これは、必要なリソースを最初にホームページにロードする必要があることも意味します。これ以降、ページには必要なコンテンツのみが読み込まれます。つまり、アプリケーションは最初にすべてのコンテンツをロードするのではなく、2 番目のアプリケーション コンテンツが要求されたときにロードされます。

ページのコンテンツ全体ではなく、部分的なリソースのみを提供するには、サーバー側のコーディングを実行する必要があることに注意してください。

ブラウザのサポート

この記事の執筆時点では、主要なブラウザによる History API のサポートは非​​常に優れています。このリンクをクリックすると、サポートされているブラウザと使用方法が表示されます。どの特定の機能がサポートされているかを検出するための良い方法です。

メソッドを変更してブラウザがこの API をサポートしているかどうかを判断するには、次のコード行を使用して確認できます:

return !!(window.history && history.pushState);

最新のブラウザを使用している場合は、次のコードを使用できます:

if (Modernizr.history) {
    // History API Supported
}

Ifお使いのブラウザは History API をサポートしていないため、代わりに History.js を使用できます。

履歴の使用

HTML 5 では、次の 2 つの新しいメソッドが提供されます:

1.history.pushState();
2.history.replaceState(); どちらのメソッドでも、動作は同じです。同じ数のパラメータを追加できます。メソッドに加えて、popstate イベントもあります。次の記事では、popstateイベントの使い方と使うタイミングを紹介します。

pushState() には replaceState() と同じパラメータがあります。パラメータの説明は次のとおりです:

state: JSON 文字列を格納し、popstate イベントで使用できます。

title: 現在、ほとんどのブラウザーはこのパラメーターをサポートしていないか無視しています。代わりに null を使用することをお勧めします。

url: ブラウザーのアドレス バーを更新するために使用され、URL が既に存在するかどうかは関係ありません。住所リスト。さらに、ページはリロードされません。

2 つのメソッドの主な違いは、pushState() は履歴スタックに新しいエントリを追加し、replaceState() は現在のレコード値を置き換えることです。これについてまだ混乱している場合は、いくつかの例を使用して違いを示します。

2 つのスタック ブロックがあり、1 つは 1、もう 1 つは 2 というラベルが付けられ、3 番目のスタック ブロックには 3 というラベルが付けられているとします。 PushState() が実行されると、既存のスタックにスタック ブロック 3 が追加されるため、スタックは 3 つのブロック スタックを持つことになります。

同じ仮想シナリオの下で、replaceState() が実行されると、ブロック 3 はブロック 2 のスタックに配置されます。したがって、履歴レコードの数は変化しません。つまり、pushState() は履歴の数を 1 増やします。比較結果は次のとおりです。ブラウザの履歴では、pushState() および replaceState() イベントは無視されます。ただし、ブラウザーが多数の不正なレコードをカウントすると仮定すると、ユーザーはこれらのページにリダイレクトされる場合もあれば、リダイレクトされない場合もあります。この場合、ユーザーがブラウザーの「進む」および「戻る」ナビゲーション ボタンを使用すると、予期しない問題が発生します。

ただし、処理に PushState() と replaceState() を使用する場合は、popstate イベントがトリガーされることが予想されます。しかし実際にはそうではありません。代わりに、セッション履歴を参照すると、進むボタンまたは戻るボタンをクリックするか、history.go およびhistory.back メソッドを使用するかに関係なく、popstate がトリガーされます。

注意：在WebKit浏览器中，popstate事件在document的onload事件后触发，Firefox和IE没有这种行为。

Demo示例

HTML：

<div class="container">
    <div class="row">
        <ul class="nav navbar-nav">
            <li><a href="home.html" class="historyAPI">Home</a></li>
            <li><a href="about.html" class="historyAPI">About</a></li>
            <li><a href="contact.html" class="historyAPI">Contact</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="well">
                Click on Links above to see history API usage using <code>pushState</code> method.
            </div>
        </div>
        <div class="row">   
            <div class="jumbotron" id="contentHolder">
                <h1>Home!</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

JavaScript：

<script type="text/javascript">
    jQuery(&#39;document&#39;).ready(function(){
        jQuery(&#39;.historyAPI&#39;).on(&#39;click&#39;, function(e){
            e.preventDefault();
            var href = $(this).attr(&#39;href&#39;);
            // Getting Content
            getContent(href, true);
            jQuery(&#39;.historyAPI&#39;).removeClass(&#39;active&#39;);
            $(this).addClass(&#39;active&#39;);
        });
    });
    // Adding popstate event listener to handle browser back button 
    window.addEventListener("popstate", function(e) {
        // Get State value using e.state
        getContent(location.pathname, false);
    });
    function getContent(url, addEntry) {
        $.get(url)
        .done(function( data ) {
            // Updating Content on Page
            $(&#39;#contentHolder&#39;).html(data);
            if(addEntry == true) {
                // Add History Entry using pushState
                history.pushState(null, null, url);
            }
        });
    }
</script>

HTML 5中的History API 对Web应用有着很大的影响。为了更容易的创建有效率的、对SEO友好的单页面应用，它移除了对散列值的依赖。