HTML5 History APIは更新されないジャンプを実装します

**。comになったとき、ログインと登録のアニメーション効果は非常にゴージャスであることがわかりましたが、私が衝撃を与えたのは、ページが実際にリフレッシュジャンプを達成できないことです。私は学んだフロントエンドの知識をレビューしましたが、これを達成する技術がないようです。そこで、私はBaiduで検索しましたが、これはもともとHTML5のHistory APIを使用して達成されたことがわかりました。

**。comになったとき、ログインと登録のアニメーション効果は非常にゴージャスであることがわかりましたが、私が衝撃を与えたのは、ページが実際にリフレッシュフリージャンプを達成できることでした（改訂された、この効果を見るときにこの場所を打つことができます：GithubまたはFM）。私は学んだフロントエンドの知識をレビューしましたが、これを達成できる技術はないようです。そのため、これはもともとHTML5のHistory APIを使用して達成されたことがわかりましたが、役に立つことはありません。この技術は、ブログが改訂されるまで適用されませんでした。

1. JSを介してブラウザ履歴にアイテムを追加する機能を追加しました。

2。ページを更新せずに、変更されたブラウザアドレスバーにURLを表示します。

3.ユーザーがブラウザのバックボタンをクリックしたときに発射するイベントを追加しました。

上記の3つのポイントを通じて、ページを更新せずにブラウザアドレスバーのURLを動的に変更し、ページコンテンツを動的に表示することができます。

たとえば、ページAとページBの内容が異なる場合、HTML5の前に、ページAからページBに切り替える場合、ブラウザでページAからページBに切り替える必要があります。または、バックボタン機能が必要な場合は、＃XXXXをURLアドレスに追加してバック機能を実現できます。 HTML5では、履歴APIを使用して次の処理を実装できます。

1。AJAXリクエストを送信して、ページAのデータBをリクエストします。

2。対応する情報をページAのJSを介して対応する場所にロードします。

3.ページAのURLアドレスから、ページを更新せずに履歴APIを介してブラウザのアドレスバーのページBのURLアドレスに切り替えます。

1.歴史の用語数の長さ。 JavaScriptが管理できる履歴は、ブラウザのフォワードキーとバックキーを使用して到達できる範囲に限定されています。このプロパティは、2つのフォワードボタンとバックボタンの下に含まれるアドレスカウントの合計を返します。

1。バック（）バック。これは、バックキーを押すのに相当します。

2。フォワード（）進むことは、フォワードキーを押すのと同等です。

3.go（）使用法：history.go（x）;履歴範囲内の指定されたアドレスに移動します。 x <0の場合、バックxはx> 0の場合、x == 0の場合はxアドレスを転送し、開いているページを更新します。 history.go（0）はlocation.reload（）に相当します。

1。history.pushstate（data、title [、url]）：履歴スタックの上部にレコードを追加します。 OnPopstateイベントがトリガーされると、データはパラメーターとして渡されます。タイトルはページタイトルであり、現在のすべてのブラウザはこのパラメーターを無視します。 URLはページアドレス、オプションであり、デフォルトは現在のページアドレスです。

2。history.replaceState（データ、タイトル[、url]）：現在の履歴を変更すると、パラメーターは上記と同じです。

3。HISTOSION.STATE：上記の方法のデータデータを保存するために使用されます。異なるブラウザの読み取りおよび書き込み許可は異なります。

4。Popstateイベント：このイベントは、ユーザーがブラウザのバックボタンまたはフォワードボタンをクリックするとトリガーされます。イベントをトリガーするイベントオブジェクトの状態プロパティ値は、イベント処理機能で読み取られます。このプロパティ値は、プッシュステートメソッドを実行するときに使用される最初のパラメーター値です。これにより、ブラウザ履歴に追加されたオブジェクトが同期して保存されます。

これまでのところ、ブラウザは、IE10、Firefox4以降、Chrome 8以降、Safari5以上によってHTML5の履歴APIをサポートしています。