2012-03-16 16 views
6

popStateのイベントは、URLが変更されたとき(開始時または終了時)にトリガーされます。特定の条件でpopStateをキャンセルする方法

<a href="#anchor">Top</a> 

もページが「リロード」を引き起こし、popStateがトリガされます。そして、最近私は、例えば、http://www.example.com/で、ということに気づきました。
同じURLで、#部分のみが変更されていることをどのように知ることができますか?例では

$(window).bind("popstate",function(){ 
    swap(location.href); 
}) 

あなたは「トップ」リンク(上記参照)をクリックしたとき、私は期待していないとすると、ページが#anchorに行きますが、またそれはpopStateをトリガし、リロードが発生します。

答えて

0

window.location.hashをチェックして、#タイプのアンカーが追加されていることを確認し、適切な処置をとることができます。

また、window.onhashchangeをチェックすると、フルURLの変更をwindow.location.hrefに、またはハッシュ変更のみで区別することができます。

例:

window.onhashchange = function() 
{ 
    console.log('Hash change:' + window.location.hash); 
} 
+1

しかし、どのように私は 'popState'とそれを組み合わせることができますか? –

+0

[MDN](https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history): ''新しいURLが古いURLとだけ異なる場合でも、pushState()はhashchangeイベントを発生させません。そのハッシュ ""うまく動作していないようだ。 –

4

これは単なるアンカー変化であったので、私は次のようなコードでそれを自分自身を追跡するために持っていたということならば、私が決定するイベントから何かを見つけることができませんでした:

function getLocation() { 
    return location.pathname + location.search; 
} 

var currentLocation = getLocation(); 

$(function() { 
    $(window).on("popstate", function() { 
    var newLocation = getLocation(); 
    if(newLocation != currentLocation) { 
     // DO STUFF 
    } 
    currentLocation = newLocation; 
    }); 
}) 

位置はハッシュなしで保存されるため、アンカーでリンクをクリックするとポップステートが発生すると、getLocationメソッドは以前と同じ結果を返し、ページをスワップするコードは発生しません。

あなたが適切に現在の位置を追跡することを確認するために、あなたはまた、あなたがpushState(と状態を変更するたびに変数を更新する必要があります)またはreplaceState()

関連する問題