歴史って面白いですね。以前のバージョンの HTML では、閲覧履歴の操作は非常に限られていました。どのような方法を使用できるかを行ったり来たりすることはできますが、私たちにできるのはそれだけです。
ただし、HTML 5 の履歴 API を使用すると、ブラウザの履歴をより適切に制御できます。たとえば、履歴レコードのリストにレコードを追加したり、更新がないときにアドレス バーの URL を 更新したりできます。
この記事では、HTML 5 における History API の起源を理解します。これまでは、ページのコンテンツ、特にページにとって特に重要なコンテンツを変更するためにハッシュ値を使用することがよくありました。更新がないため、シングルページ アプリケーションの URL を変更することはできません。さらに、URL のハッシュ値を変更しても、ブラウザの履歴には影響しません。
さて、HTML 5 の History API ですが、これらは簡単に実装できますが、シングルページアプリケーションではハッシュ値を使用する必要がないため、追加の開発スクリプトが必要になる場合があります。また、SEO に配慮した方法で新しいアプリケーションを構築することもできます。さらに、帯域幅も減少しますが、それを証明するにはどうすればよいでしょうか?
この記事では、History APIを使用してシングルページアプリケーションを開発し、上記の問題を証明します。
これは、必要なリソースを最初にホームページにロードする必要があることも意味します。これ以降、ページには必要なコンテンツのみが読み込まれます。つまり、アプリケーションは最初にすべてのコンテンツをロードするのではなく、2 番目のアプリケーション コンテンツが要求されたときにロードされます。
ページのコンテンツ全体ではなく、部分的なリソースのみを提供するには、サーバー側のコーディングを実行する必要があることに注意してください。
この記事の執筆時点では、主要なブラウザによる History API のサポートは非常に優れています。このリンクをクリックすると、サポートされているブラウザと使用方法が表示されます。どの特定の機能がサポートされているかを検出するための良い方法です。
メソッドを変更してブラウザがこの API をサポートしているかどうかを判断するには、次のコード行を使用して確認できます:
return !!(window.history && history.pushState);
さらに、この記事を参照することをお勧めします: Detect Support for Everything HTML5 features (ps. : 後で翻訳します)
最新のブラウザを使用している場合は、次のコードを使用できます:
if (Modernizr.history) {
// History API Supported
}ブラウザが History API をサポートしていない場合は、代わりにhistory.jsを使用できます。
HTML 5 には 2 つの新しいメソッドが用意されています:
1.history.pushState(); 2.history.replaceState(); どちらのメソッドも同じように機能します。同じ数のパラメータを追加できます。メソッドに加えて、popstate
イベントもあります。次の記事ではpopstateイベントの使い方と使うタイミングを紹介します。 pushState()
のパラメータはreplaceState()と同じです: 1. state
:popstateで使用できるJSON文字列を格納します。イベント。 2. title
: 現在、ほとんどのブラウザはこのパラメータをサポートしていないか、無視しています。代わりに null を使用するのが最善です3. url
: ブラウザのアドレスバーを更新するために使用される任意の有効な 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都会被触发。
In WebKit browsers, a popstate event would be triggered after document’s onload event, but Firefox and IE do not have this behavior.（在WebKit浏览器中，popstate事件在document的onload事件后触发，Firefox和IE没有这种行为）。
HTML：
<p class="container">
<p 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>
</p>
<p class="row">
<p class="col-md-6">
<p class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</p>
</p>
<p class="row">
<p class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</p>
</p>
</p>
</p>JavaScript：
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// 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
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>Demo 1：HTML 5 History API – pushState
历史条目在浏览器中被计算，并且可以很容易的使用浏览器的前进和后退按钮。View Demo （ps:你在点击demo1的选项卡时，其记录会被添加到浏览器的历史记录，当点击后退/前进按钮时，可以回到/跳到你之前点击的选项卡对应的页面）
Demo 2：HTML 5 History API – replaceState
历史条目在浏览器中被更新，并且不能使用浏览器的前进和后退按钮进行浏览。View Demo （ps:你在点击demo1的选项卡时，其记录会被替换当前浏览器的历史记录，当点击后退/前进按钮时，不可以回到/跳到你之前点击的选项卡对应的页面，而是返回/跳到你进入demo2的上一个页面）
HTML 5中的History API 对Web应用有着很大的影响。为了更容易的创建有效率的、对SEO友好的单页面应用，它移除了对散列值的依赖。
以上がHTML 5 History API の「過去と現在」を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
