해시 태그로 페이지 매김을 추적하는 더 좋은 방법이 있습니까?

Question

hashchange 이벤트를 사용하여 사용자가 브라우저에서 뒤로 버튼을 클릭하고 이에 따라 URL을 변경하면이를 감지합니다. 페이지 매김을 위해이 작업을 수행하는 더 좋은 방법이 있습니까? 사용자가 같은 내 매김 제어를 클릭 한 후 내가 현재 URL을 변경하고 있습니다 : 뒤로 버튼을 감지 할 수

$(".pager").click(function(){ 

    var start = null; 
    if ($.browser.msie) {  
     start = $(this).attr('href').slice($(this).attr('href').indexOf('#')+1); 
    } 
    else {  
     start = $(this).attr('href').substr(1); 
    } 

    $('#start').val(start); 

    $.post("visits_results.php", $("#profile_form_id").serialize(), 
    function(data) { 
     $('#search_results').html(data); 
     location.href = "#visits=" + start; 
    }); 

    return false; 
}); 

내 자바 스크립트은 다음과 같습니다

function myHashChangeCallback(hash) { 

    if (hash == "") { 
     $("#loadImage").show(); 

     var no_cache = new Date().getTime(); 
     $('#main').load("home.php?cache=" + no_cache, function() { 
     $("#loadImage").hide(); 
    }); 

    return false; 

    } 
    else { 
    // adding code to parse the hash URL and see what page I'm on...is there a better way?; 
    } 
} 

function hashCheck() { 
    var hash = window.location.hash; 
    if (hash != _hash) { 
     _hash = hash; 
     myHashChangeCallback(hash); 
    } 
} 

나는 현재 각 해시 태그를 점검 계획 및 더 효율적인 방법이없는 한로드해야하는 페이지를 확인하는 값입니다.

의견이나 제안이 있으십니까?

Answer 1

jQuery Address 플러그인은이 작업을 매우 잘 처리합니다. 설정을 마치면 일련의 논리적 탐색 이벤트를 제공합니다. 또한 history.pushState()을 지원하므로 최신 브라우저에서 해시 태그를 사용할 필요가없고 pushState를 지원하지 않는 브라우저에서도 폴백 지원을 사용할 수 있습니다.

// Run some code on initial load 
$.address.init(function(e) { 
    // Address and path details can be found in the event object 
    console.log(e); 
}); 

// Handle hashtag/pushState change events 
$.address.change(function(e) { 
    // Do more fancy stuff. Don't forget about the event object. 
    console.log(e); 
}); 

// Setup jQuery address on some elements 
$('a').address(); 

이 pushState() 지원과 같이 스크립트에 인수를 전달할 수 있도록하려면 :

간단한 구현은 다음과 같을 것이다

<script type="text/javascript" src="jquery.address-1.3.min.js?state=/absolute/path/to/your/application"></script>