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

StackOverflow https://stackoverflow.com/questions/172957

質問

新しいホームページを 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がペグされました。

役に立ちましたか？

解決

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

他のヒント

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

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

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

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

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

HTML5には、HTML5状態管理APIであるhashchangeを使用するよりもはるかに優れたソリューションが含まれています- https： //developer.mozilla.org/en/DOM/Manipulating_the_browser_history -ハッシュを使用せずにページのURLを変更できます！

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

ここで詳細を読むことができます： https://github.com/browserstate/History.js

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

注目すべきもう1つのプロジェクトは、 jQuery Ajaxy です。これはjQueryの拡張機能です。 Ajaxをミックスに追加する履歴。ハッシュを使用してajaxを使用し始めると、非常に複雑になります！

以下を実行します。使用する場合は、どこかに貼り付け、ハンドラーコードをlocationHashChanged（qs）でコメントのある場所に設定し、ajaxリクエストを読み込むたびにchangeHashValue（hashQuery）を呼び出します。 それは簡単な解決策ではなく、何もありませんので、あなたはそれについて考えて、賢明なhashQuery引数（すなわちa = 1＆amp; 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();

シンプルな＆amp;を試してください軽量の PathJS ライブラリ。

簡単な例：

Path.map("#/page").to(function(){
    alert('page!');
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top