브라우저 뒤로 버튼/#one #two 등

Question

가능한 중복 :
Making Browser Back button work while using AJAX requests

좀 jQuery를 작성하려면 브라우저 URL 변경 (새로 고침하지) 그것이 할 것이다 때 동작.

나는 100 %는 그래서 그들은

• www.hello.com/#one
• www.hello.com/#two
• www.hello 될 URL이 될 것입니다 무엇을 알 수 있습니다. co.kr/# three

나는 그 행동을 너무 걱정하지 않는다. 새로 고침하지 않을 때 URL이 변경되었음을 감지하는 것이 중요합니다.

모든 포인터?

저는 플러그인을 사용하고 싶지 않습니다. 필자는 내가 원하는 것을 과잉 사용한다고 생각합니다. 달성하고자하는 것에 대해 구체적으로 알고 있습니다. 내 프로젝트 중 하나에서 가져온 다음 코드 밖으로

Answer 1

확인 (http://yankele.co.il)

$(document).ready(function() { 

    //Declare some variables... 
    var $mainContent = $('.main-content'), 
     contentHeight = $mainContent.height(), 
     siteURL = 'http://' + top.location.host.toString(), 
     hash = window.location.hash, 
     $internalLinks = $('a[href^=' + siteURL + ']'), 
     $ajaxSpinner = $('#spinner'), 
     URL = '', 
     $el; 
     console.log(contentHeight); 

    $mainContent.height(contentHeight);  
    $internalLinks.each(function() { 

     $el = $(this); 
     $el.attr('href', '#' + this.pathname); 

    }).click(function() { 

     $ajaxSpinner.fadeIn(); 
     $mainContent.animate({opacity: '0.1'}); 
     $('.current_page_item').removeClass('current_page_item'); 
     $el = $(this); 
     URL = $el.attr('href').substring(1); 
     URL += ' #inside'; 
     $mainContent.load(URL, function() { 
     marquee(); 
     $ajaxSpinner.fadeOut(); 
     $mainContent.animate({opacity: '1'}); 
     $el.parent().addClass('current_page_item'); 
     contentHeight = parseInt($mainContent.css('paddingTop')) + parseInt($mainContent.css('paddingBottom')) + $('#inside').height(); 
     $mainContent.animate({height: contentHeight}); 
     }); 

    }); 

    if (hash != '' && hash != '#/') { 

     $ajaxSpinner.fadeIn(); 
     $mainContent.animate({opacity: '0.1'}); 
     $('.current_page_item').removeClass('current_page_item'); 
     URL = hash.substring(1); 
     URL += ' #inside'; 
     $('a[href="'+window.location.hash+'"]').addClass('current_link').parent().addClass('current_page_item'); 
     $mainContent.load(URL, function() { 
     marquee(); 
     $ajaxSpinner.fadeOut(); 
     $mainContent.animate({opacity: '1'}); 
     contentHeight = parseInt($mainContent.css('paddingTop')) + parseInt($mainContent.css('paddingBottom')) + $('#inside').height(); 
     $mainContent.animate({height: contentHeight});   
     }); 

    } 

}); 

그것은 오래된, 그러나 그것은 메인 컨텐츠 영역에있는 모든 링크를 클릭 때, 메인입니다 무엇을, 작동 콘텐츠가 흰색으로 희미 해지면 AJAX 회 전자가 나타나고 페이지에서 AJAX의 링크가 페이지에로드됩니다. 새로 고칠 때도 작동합니다.