2011-07-03 8 views
2

私はHTML5履歴オブジェクトを理解しようとしています。ここから始めた簡単な例があります。javascript history onpopstate

function addDialog(){ 
     document.getElementById('d').style.display =''; 
     history.pushState({name:"changed"},"","#newURL"); 
    } 

    window.onpopstate = function(e){ 
     alert(e.state); 
    } 

私はdisplayプロパティがnoneされたID ddivを持っています。リンクをクリックすると、divを表示し、履歴を変更して新しいURLがロードされるようにします。

新しいURLを貼り付けてコピーすると、popstateイベントが発生し、e.stateの場合はnullと表示されます。

新しいURLをロードすると、e.stateは、私がpushstateを使用してプッシュしたオブジェクトを指しているはずです。新しいURLをロードすると、http://example.com#newURLがロードされます。

私が間違っている場合は、またe.stateが入力されたことを知りたい場合は、私を修正してください。

答えて

3

私がテストしたように、e.stateは、[戻る]または[進む]ボタンをクリックしたときに履歴に追加するポップ状態のみを取得します。それ以外の場合は、nullを返します。

URLにパラメータを使用すると、リクエストが履歴呼び出しやロケーションバーのURLから来たものかどうかをテストできます。

onpopstate = function(event) { 
    alert('popEvent: ' + event); 
    if(event.state){ 
     setupPage(event.state); 
    } else { 
     setupPage(getQStringParam('zid')); 
    } 
}