URL에서 Back 버튼/Hash 변경 감지

URL에서 Back 버튼/Hash 변경 감지

저는 방금 http://ritter.vg에 새 홈페이지를 설치했습니다.jQuery를 사용하지만 최소로 사용합니다.
AJAX를하여 모든 할 수 있도록 .AJAX는 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가 고정되었습니다.

여기 있는 답변들은 모두 꽤 오래되었습니다.

HTML5 월드에서는 이벤트를 사용해야 합니다.

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 해시 변경 이벤트 플러그인을 사용하십시오.풀 에이잭스 내비게이션에 대해서는 SEO 프렌들리 에이잭스를 사용해 보세요.그렇지 않으면 JavaScript 제한이 있는 브라우저에는 페이지가 표시되지 않습니다.

jQuery BBQ (뒤로 버튼 & 쿼리 라이브러리)

고품질 해시 기반 브라우저 이력 플러그인과 이 문서(jQuery 1.4.1)의 최신 버전(2010년 1월 26일)

HTML5에는 HTML5 State Management 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 를 참조해 주세요.

또 하나의 뛰어난 구현은 balupton의 jQuery History입니다.이러한 이벤트는 브라우저가 지원하는 경우 네이티브 onhashchange 이벤트를 사용합니다.지원되지 않는 경우 브라우저에 iframe 또는 interval을 적절하게 사용하여 예상되는 모든 기능이 정상적으로 에뮬레이트되도록 합니다.또, 특정의 스테이트에 바인드 할 수 있는 인터페이스도 갖추고 있습니다.

jQuery History를 확장한 jQuery Ajaxy도 주목할 만한 프로젝트입니다.해시와 함께 아약스를 사용하기 시작하면 매우 복잡해집니다!

다음 절차를 수행합니다.사용하고 싶은 경우는, 그것을 어디에 붙여 코멘트가 있는 locationHashChanged(qs)에 핸들러 코드를 설정하고, ajax 요구를 로드할 때마다 changeHashValue(hashQuery)를 호출합니다.이것은 빠른 수정의 답변이 아닙니다.따라서 당신은 그것에 대해 생각해 보고 현명한 hashQuery args(a=1&b=2)를 changeHashValue(hashQuery)로 전달한 후 당신의 위치 HashChanged(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