web-dev-qa-db-ja.com

URLの戻るボタン/ハッシュの変更を検出する

http://ritter.vg で新しいホームページを設定しました。私はjQueryを使用していますが、ごくわずかです。
AJAX-URLのハッシュを検出してブックマークを許可するように設定しました。

 //general functions
 function getUrl(u) {
      return u + '.html';
 }
 function loadURL(u)    {
      $.get(getUrl(u), function(r){
                $('#main').html(r);
           }
      );
 }
 //allows bookmarking
 var hash = new String(document.location).indexOf("#");
 if(hash > 0)
 {
      page = new String(document.location).substring(hash + 1);
      if(page.length > 1)
        loadURL(page);
      else
        loadURL('news');
 }
 else
      loadURL('news');

しかし、戻るボタンと進むボタンを機能させることはできません。

SetIntervalループを使用せずに戻るボタンが押されたことを検出する方法（またはハッシュが変更されたときに検出する方法）はありますか？ .2および1秒のタイムアウトでそれらを試してみたところ、CPUがペグされました。

javascriptajaxnavigationfragment-identifierhashchange
60
Tom Ritter

代わりに jQuery hashchange event プラグインを使用してください。完全なajaxナビゲーションに関しては、 SEOフレンドリーajax にしてください。そうしないと、JavaScriptの制限があるブラウザでページが何も表示されませんでした。

31
Komang

ここでの答えはすべてかなり古いものです。

HTML5の世界では、 onpopstate イベントを使用する必要があります。

window.onpopstate = function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

または：

window.addEventListener('popstate', function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

後者のスニペットでは、複数のイベントハンドラーを存在させることができますが、前者は、見つけにくいバグを引き起こす可能性のある既存のハンドラーを置き換えます。

46
Drew Noakes

jQuery BBQ（戻るボタンとクエリライブラリ）

高品質のハッシュベースのブラウザー履歴プラグインと非常に多くの この記事の執筆時点（2010年1月26日）（jQuery 1.4.1） 。

12
micahwittman

HTML5には、HTML5状態管理APIであるhashchangeを使用するよりもはるかに優れたソリューションが含まれています。 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history -ページ、ハッシュを使用する必要なし！

ただし、HTML5状態機能はHTML5ブラウザーでのみ使用できます。したがって、おそらく History.js のようなものを使用する必要があります。これは、HTML4ブラウザーに後方互換性のあるエクスペリエンスを提供します（ハッシュを介して、データとタイトル、およびreplaceState機能を引き続きサポートします）。

詳細についてはこちらをご覧ください： https://github.com/browserstate/History.js

11
balupton

別の優れた実装はbaluptonの jQuery History です。これは、ブラウザでサポートされている場合はネイティブのonhashchangeイベントを使用し、そうでない場合はブラウザに適切なiframeまたは間隔を使用して、期待されるすべての機能が正常に実行されるようにしますエミュレート。また、特定の状態にバインドするためのNiceインターフェイスも提供します。

注目に値するもう1つのプロジェクトは jQuery Ajaxy です。これは、ミックスにajaxを追加するjQuery Historyの拡張機能です。ハッシュを使用してajaxを使用し始めると、 quite complex ！

2
balupton

あなたがそれを使用したい場合は、次のことを行い、それをどこかに貼り付けて、コメントされたlocationHashChanged（qs）にハンドラコードを設定し、ajaxリクエストをロードするたびにchangeHashValue（hashQuery）を呼び出します。それは簡単な解決策ではなく、何もありませんので、あなたはそれについて考えて、賢明なhashQuery引数（すなわちa = 1＆b = 2）をchangeHashValue（hashQuery）に渡し、それからあなたのlocationHashChangedの前記引数の各組み合わせに対応する必要があります（QS）コールバック...

// Add code below ...
function locationHashChanged(qs)
{
  var q = parseQs(qs);
  // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !!
  // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION
  //  THAT IS PASSED TO changeHashValue(hashQuery)
}

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ...
function changeHashValue(hashQuery)
{
  stopHashListener();
  hashValue     = hashQuery;
  location.hash = hashQuery;
  startHashListener();
}

// AND DONT WORRY ABOUT ANYTHING BELOW ...
function checkIfHashChanged()
{
  var hashQuery = getHashQuery();
  if (hashQuery == hashValue)
    return;
  hashValue = hashQuery;
  locationHashChanged(hashQuery);
}

function parseQs(qs)
{
  var q = {};
  var pairs = qs.split('&');
  for (var idx in pairs) {
    var arg = pairs[idx].split('=');
    q[arg[0]] = arg[1];
  }
  return q;
}

function startHashListener()
{
  hashListener = setInterval(checkIfHashChanged, 1000);
}

function stopHashListener()
{
  if (hashListener != null)
    clearInterval(hashListener);
  hashListener = null;
}

function getHashQuery()
{
  return location.hash.replace(/^#/, '');
}

var hashListener = null;
var hashValue    = '';//getHashQuery();
startHashListener();
1
Eugene Kerner

シンプルで軽量な PathJS libを試してください。

簡単な例：

Path.map("#/page").to(function(){
    alert('page!');
});
1
Nikita Koksharov