HTML5のHistory APIを掘り下げます

この記事では、主にHTML5 History APIの詳細な調査を紹介し、HTML5の新しい方法history.pushState（）およびhistory.replacestate（）に焦点を当てています。それを必要とする友達はそれを参照できます。

歴史は楽しいですね。以前のHTMLバージョンでは、閲覧履歴に関する操作は非常に限られていました。前後に使用できる方法を使用できますが、それができることはすべてです。

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

なぜ歴史APIを導入するのですか？

この記事では、HTML 5の歴史APIの起源について学びます。この前に、ハッシュ値を使用してページコンテンツ、特にページにとって特に重要な値を変更しました。更新されていないため、1つのページアプリケーションでURLを変更することは不可能です。また、URLのハッシュ値を変更すると、ブラウザの履歴に影響がありません。

次に、HTML 5 History APIの場合、これらは簡単に実装できますが、シングルページアプリケーションはハッシュ値を使用する必要はないため、追加の開発スクリプトが必要になる場合があります。また、SEOに優しい方法で新しいアプリケーションを構築することもできます。さらに、帯域幅を減らすことができますが、どうすれば証明できますか？

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

これはまた、最初にホームページに必要なリソースをロードする必要があることを意味します。次に、ページは必要なコンテンツのみをロードします。言い換えれば、アプリケーションは最初にすべてのコンテンツをロードするわけではなく、2番目のアプリケーションコンテンツを要求するときにのみロードされます。

完全なページコンテンツではなく、リソースの一部のみを提供するために、サーバー側のエンコードを実行する必要があることに注意してください。

この記事を書くとき、主要なブラウザによるHistory APIのサポートは非常に優れています。ここをクリックしてサポートを表示できます。このリンクでは、サポートされているブラウザが表示され、それらを使用する前に、特定のサポートされている機能を検出するための良い実践が常にあります。

ブラウザがこのAPIをある意味でサポートするかどうかを判断するために、次のコード行を使用して確認できます。