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;}

• 
  测试
  


• 
  测试
  


• 
  测试
  

• 
  
• 
  
• 
  
  

JS:

复制代

代码以下:

/**
* HTML の歴史と ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind ().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
if(ajax == 未定義) {
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
}; }
ajax = $.ajax({
type:'POST',
url: url,
dataType:'json',
success: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i ) {
html = '

' data[i].age '
'

' data[i].name '
'

'セックス '

';
}
$('.content').html(html);
}
var state = {
url: url,
タイトル: document.title,
html: $('.content').html()
};
history.pushState(state,null,url);
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
}else if(event &&event.state){
document .title = イベント.state.title;
$('.content').html(event.state.html);
}else{
document.title = currentState.title; ('.content').html(currentState.html);
});