62

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

4

7 に答える 7

49

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

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

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

于 2012-12-06T15:49:55.497 に答える
31

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

于 2008-10-06T02:46:02.530 に答える
11

HTML5 には、HTML5 状態管理 API であるhashchangeを使用するよりもはるかに優れたソリューションが含まれています。 !

ただし、HTML5 状態機能は HTML5 ブラウザーでのみ使用できます。したがって、HTML4 ブラウザーに下位互換性のあるエクスペリエンスを提供するHistory.jsのようなものを使用することをお勧めします (ハッシュを使用しますが、データとタイトル、および replaceState 機能を引き続きサポートします)。

詳細については、 https ://github.com/browserstate/History.js を参照してください。

于 2011-01-30T14:02:17.840 に答える
2

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

注目に値するもう 1 つのプロジェクトは、jQuery Ajaxy です。これは、jQuery History を ajax に追加するためのほぼ拡張機能です。ハッシュを使用して ajax を使い始めると、非常に複雑になります。

于 2010-08-28T17:47:01.533 に答える
1

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

簡単な例:

Path.map("#/page").to(function(){
    alert('page!');
});
于 2012-04-19T18:16:31.713 に答える
1

それを使用したい場合は、次のようにします。それをどこかに貼り付けて、コメントが付けられた 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();
于 2011-04-18T19:53:07.387 に答える