HTML 5 history API実践

13753 ワード

history

一、history API知識点まとめ
HTML 4ではwindowを使用できます.historyオブジェクトは、履歴のジャンプを制御します.使用できる方法は、次のとおりです.

　　history.forward();//          

　　history.back();//          

　　history.go(n);//        n ，n=0      ，n=-1

HTML 5には、次の4つの利用可能なAPIが追加されました.

history.pushState(data[,title][,url]);//            ，data   js  ，        json  ，title        ，          。  url          ，       url

history.replaceState(data[,title][,url]);//              。       。

history.state;//     ，        state  。

window.onpopstate;//     ，           js  forward()、back()、go()   。          event  ，event.state    pushState() replaceState()     data  。

二、新しいAPIの実際の使用
これらの新しいAPIがあることを知って、私たちはどのようにそれらを利用することができますか?次の2つの使用例を示します.
①ajaxプログラムでブラウザ後退ボタンの機能を復元します.このアプリケーションは、ajaxの固有の欠点(ブラウザの戻るボタンで前のページに戻ることができない)のため、ajaxリクエストを開始するときに履歴にレコードを追加し、アドレスバーの値を変更することで、ajaxの非同期ロードの利点を維持しながら、正常なジャンプをシミュレートすることが広く知られています.方法は次のとおりです.

var title = '     ';
var url = 'http://www.cnblogs.com/lvdabao/p/     .html';
var state = {title:title,url:url};
history.pushState(state,title,url);//     url

次のボタンをクリックして、アドレスバーの変化に注意します.
//<![CDATA[
function loadAnother(){
var title='もう一つのエッセイ';・13;
var url = 'http://www.cnblogs.com/lvdabao/p/もう一つのエッセイhtml';
var state = {title:title,url:url};
history.pushState(state,title,url);//3番目のパラメータurlの値がアドレスバーに表示されます.
}
//]]>
　　　　
②非同期要求のパラメータを保存し、ページ戻り時に元のページの動的データを再現する.具体的なニーズは、例えば、検索結果リストページにあり、ページの内容は検索条件に基づいて動的に得られ、そのうちの1つをクリックして詳細プレビュー(ajaxリクエスト)を行うことができ、詳細ページが「戻る」をクリックしたとき、リストページの初期ロード時のデータではなく、元の検索データが戻ってくることを望んでいます.以前は,このようなニーズを再送パラメータで解決できたが,その欠点は大量のデータを往復させる必要があり,ページレベルが多ければ不便であることである.では、historyを使用したonpopstateイベントと組み合わせて、このような機能を完了することができます.例として、
HTML 5 historyを紹介するページを作ります.index.htmlのコードは次のとおりです.

<body>
<p>HTML5 history API   </p>
<a href="javascript:void(0)" id="pushstate">history.pushState(data, title [, url])</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="replacestate">history.replaceState(data, title [, url]) </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="onpopstate">window.onpopstate</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="back">  </a>
<div id="loaddiv"></div>
<script>

$(function(){
    
    var loaddiv = $('#loaddiv');
　　
　　//       ，   loaddiv        

    $('#pushstate').click(function(){
        loaddiv.load('1.php?stype=push');
        history.pushState({title:'push',url:'1.php?stype=push'});
        });
    $('#replacestate').click(function(){
        loaddiv.load('1.php?stype=replace');
        history.pushState({title:'replace',url:'1.php?stype=replace'});
        });
    $('#onpopstate').click(function(){
        loaddiv.load('1.php?stype=onpop');
        history.pushState({title:'onpop',url:'1.php?stype=onpop'});
        });

　　//    ，        
    $('#back').click(function(){
        history.back();
        });
       
　　//  popstate  ，    e.state  ，        pushState        ，      url        。                        。
    window.onpopstate = function(e){
        if(e.state){
            loaddiv.load(e.state.url);
            }
    }
    
    });
</script>
</body>

historyの3つの新しい特性をそれぞれ紹介し、jqueryのloadメソッドを呼び出すことで非同期ロードし、要求を1に送信します.phpは、対応するパラメータを同時に渡します.バックグラウンドでリクエストを受信した後、異なるパラメータに基づいて異なるデータを返します.phpコードは次のとおりです.

<?php
$type = $_REQUEST['stype'];
switch($type){
    case 'push' :  
    echo 'history.pushState(data, title [, url])：               ；data  onpopstate             ；title     ，               ；url     ，  ，   ';
    break;
    case 'replace' :  
    echo 'history.replaceState(data, title [, url]) ：         ，    ';
    break;
    case 'onpop' :  
    echo 'window.onpopstate：  pushState replaceState   ；';
    break;
    }
?>

ここでphpファイルをアップロードできません.コードをローカルサーバテストにコピーできます.これによりgithubのようなページロードメカニズムを実現することができる.
以上が私が見たhistoryに関する2つの使い方です.誤りを発見したら指摘を歓迎し、他の観点も交流を歓迎する.

C言語While/FOr循環コード行数最適化(Cプログラム設計、練習問題7.18ノート)

Emmet構文(一)