Ví dụ về jQuery & history.js

Question

Tôi đang gặp một chút rắc rối khi sử dụng history.js với jQuery. Tôi chỉ muốn làm cho một bộ điều hướng làm việc với nút quay lại (mà họ dường như đang làm khá độc đáo). Tuy nhiên. Khi tôi nhấp vào nút quay lại, url sẽ thay đổi thành cũ (một lần nữa là tốt và những gì tôi muốn) nhưng nội dung không thay thế như nó cần.

Để làm cho điều này dễ hiểu hơn một chút, đây là một số mã.

<ul class="content_links"> 
     <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li> 
     <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li> 
     <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li> 
     <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li> 
     <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li> 
    </ul> 
    <div id="content"> 
     <p>Content within this box is replaced with content from supporting pages using javascript and AJAX. 
    </div> 

Rõ ràng những gì tôi muốn là nội dung của các trang tải vào nội dung đó được thực hiện tốt đẹp và dễ dàng với .load() và sau đó tôi muốn nút quay lại để di chuyển ngược qua chúng nếu người dùng sử dụng nó. Tại thời điểm URL thay đổi nhưng nội dung trong hộp thì không. Làm thế nào tôi sẽ đi về việc thay đổi hoặc sửa chữa điều đó?

Answer 1

Hãy thử như sau:

<ul class="content_links"> 
    <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li> 
    <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li> 
    <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li> 
    <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li> 
    <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li> 
</ul> 
<div id="content"> 
    <p>Content within this box is replaced with content from supporting pages using javascript and AJAX. 
</div> 

<script> 
$(function() { 

    // Prepare 
    var History = window.History; // Note: We are using a capital H instead of a lower h 
    if (!History.enabled) { 
     // History.js is disabled for this browser. 
     // This is because we can optionally choose to support HTML4 browsers or not. 
     return false; 
    } 

    // Bind to StateChange Event 
    History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate 
     var State = History.getState(); 
     $('#content').load(State.url); 
     /* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`): 
     $.get(State.url, function(response) { 
      $('#content').html($(response).find('#content').html()); }); 
     */ 
     }); 


    // Capture all the links to push their url to the history stack and trigger the StateChange Event 
    $('a').click(function(evt) { 
     evt.preventDefault(); 
     History.pushState(null, $(this).text(), $(this).attr('href')); 
    }); 
}); 
</script> 

Answer 2

nó dường như các bit sau đây không làm việc:

$.get(State.url, function(response) { 
    $('#content').html($(response).find('#content').html()); 
}); 

Bạn cần phải chuyển đổi các 'phản ứng' vào một yếu tố dom trước khi bạn có thể sử dụng 'tìm 'trên đó. Giống như vậy:

$.get(State.url, function(response) { 
    var d = document.createElement('div'); 
    d.innerHTML = response; 
    $('#content').html($(d).find('#content').html()); 
});