URL에서 뒤로 버튼 / 해시 변경 감지

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가 고정되었습니다.

---

사용 의 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 브라우저에서만 사용할 수 있습니다. 따라서 HTML4 브라우저에 이전 버전과 호환되는 경험을 제공하는 History.js 와 같은 것을 사용하고 싶을 것입니다 (해시를 통해, 그러나 데이터와 제목, replaceState 기능을 지원함).

자세한 내용은 https://github.com/browserstate/History.js에서 확인할 수 있습니다.

---

또 다른 훌륭한 구현은 balupton의 jQuery History 로, 브라우저에서 지원하는 경우 네이티브 onhashchange 이벤트를 사용하고, 그렇지 않은 경우 브라우저가 예상되는 모든 기능이 성공적으로 에뮬레이션되도록하기 위해 iframe 또는 간격을 적절하게 사용합니다. 또한 특정 상태에 바인딩 할 수있는 멋진 인터페이스를 제공합니다.

주목할 가치가있는 또 다른 프로젝트는 jQuery Ajaxy 로, jQuery History가 ajax를 믹스에 추가하기위한 확장 기능입니다. 해시와 함께 ajax를 사용하기 시작하면 꽤 복잡해집니다 !

---

다음을 수행합니다. 사용하려는 경우 일부 위치에 붙여넣고 주석이 달린 locationHashChanged (qs)에 핸들러 코드를 설정 한 다음 ajax 요청을로드 할 때마다 changeHashValue (hashQuery)를 호출합니다. 빠른 수정 답변이 아니고 아무것도 없기 때문에 이에 대해 생각하고 합리적인 hashQuery 인수 (예 : a = 1 & b = 2)를 changeHashValue (hashQuery)에 전달한 다음 해당 인수의 각 조합을 사용자의 위치에 제공해야합니다. (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();

---

간단하고 가벼운 PathJS lib를 사용해보십시오 .

간단한 예 :

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

참고URL : https://stackoverflow.com/questions/172957/detecting-back-button-hash-change-in-url