HTML5 History API は更新不要の Jump_html5 チュートリアル スキルを実装します

かつてインターネットサーフィンをしていたときに、ログインと登録のアニメーション効果が非常に素晴らしいことに気づきましたが、衝撃を受けたのは、更新せずにページがジャンプする可能性があることでした (修正されました。この効果を確認するには、ここをクリックしてください) : GitHub または FM) で学んだフロントエンドの知識を見直したところ、これを実現できる技術はないようだったので、Baidu で検索したところ、これは元々 HTML5 の History API を使用して実現されていたことがわかりました。しかし、それは一度も活用されていません。この技術が適用されたのは、ブログが改訂されてからです。
HTML5 では、
1. JS を通じてブラウザ履歴に項目を追加する機能が追加されました。
2. ページを更新せずに、ブラウザのアドレスバーに URL を表示および変更します。
3. ユーザーがブラウザの戻るボタンをクリックしたときにトリガーされるイベントを追加しました。
上記の 3 点により、ブラウザのアドレスバーの URL を動的に変更し、ページを更新せずにページのコンテンツを動的に表示することができます。
例: ページ A とページ B のコンテンツが異なる場合、HTML5 以前では、ページ A からページ B に切り替えるには、ブラウザーでページ A からページ B に切り替える必要がありました。必要に応じて 戻るボタン機能を使用したい場合は、URL アドレスに #XXXX を追加して戻る機能を実現できます。そのため、HTML5 では、History API を通じて次の処理を実装できます:
1. ページ A で AJAX リクエストを送信して、ページ内の B データをリクエストします。
2. ページ A の JS を介して、対応する場所に対応する情報を読み込みます。
3. History API を使用して、ページを更新せずに、ブラウザのアドレス バーでページ A の URL アドレスからページ B の URL アドレスに切り替えます。
HTML4 の履歴 API
属性
1.length 履歴アイテムの数。 JavaScriptが管理できる履歴はブラウザの「進む」「戻る」キーで到達できる範囲に限られます。この属性は、「進む」ボタンと「戻る」ボタンの下に含まれるアドレスの合計を返します。
メソッド
1.back() 戻る。「戻る」キーを押すのと同じです。
2.forward() 前方へ。これは「進む」キーを押すのと同じです。
3.go() 使用法:history.go(x); 履歴範囲内の指定されたアドレスに移動します。 x 0 の場合は x アドレスに進み、x == 0 の場合は現在開いている Web ページを更新します。 History.go(0) は location.reload() と同等です。
HTML5 の履歴 API
1.history.pushState(data, title [, url]): 履歴データの先頭にレコードを追加します。 be in onpopstate イベントがトリガーされると、パラメーターとして渡されます。title はページのタイトルであり、現在のすべてのブラウザーはこのパラメーターを無視します。url はページ アドレス (オプション)、デフォルトは現在のページ アドレスです。
2.history.replaceState(data, title [, url]): 現在の履歴レコードを変更します。パラメータは上記と同じです。
3.history.state: 上記のメソッドのデータを保存するために使用されます。ブラウザーごとに読み取りおよび書き込み権限が異なります。
4. Popstate イベント: このイベントは、ユーザーがブラウザの「戻る」または「進む」ボタンをクリックするとトリガーされます。イベント処理関数では、イベントをトリガーしたイベント オブジェクトの state 属性値を読み取ります。この属性値は、ブラウザ履歴にレコードを追加するときに同期的に保存された値を保存する、pushState メソッドの実行時に使用される最初のパラメーター値です。物体。
これまでのところ、IE10、firefox4 以降、Chrome8 以降、Safari5、Opera11 以降のブラウザが HTML5 の History API をサポートしています。
HTML:

コードをコピー

コードは次のとおりです:

新しいドキュメント

ul,li{list-style:none;}
.container{width:px;border:px Solid #ccc;overflow:hidden;}
.container ul{float:left;width:px ;}
.container li{width:px;height:px;line-height:px;overflow:hidden;}
.container li a{text-decoration:none;}
.container li。現在の a{color:red;}
.all-content{width:px;float:left;overflow:hidden;}

• 
  测试
  


• 
  测试
  


• 
  测试
  

• 
  
• 
  
•