jQuery＆history.js示例

我在jQuery中使用history.js時遇到了一些問題。我只是想用後退按鈕做一個導航設置（他們似乎做得很好）。然而。當我點擊後退按鈕時，url會變成舊的（這又是好的，我想要的），但是內容並沒有像它應該的那樣被替換。jQuery＆history.js示例

爲了讓這個更容易理解，下面是一些代碼。

<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>

顯然我想要的是頁面的內容加載到其與.load做漂亮和容易（），然後我想後退按鈕，如果用戶使用它通過他們向後移動內容。目前網址更改，但框中的內容不變。我將如何去改變或修復？

來源

2012-11-25 David

嘗試以下操作：

<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>

來源

2012-11-25 16:44:24 sroes

愛你的工作人員，工作過一種享受。據推測，我可以換一些說History.pushState（null，$（this）.text（），$（this）.attr（'href'））;在if（！History.enabled）中確保它優雅地降級或者上述就足夠了嗎？ – David

另外，我需要確保跨域鏈接和https鏈接正確檢查，我猜？ – David

返回false將使其優雅地退化。是的，你應該檢查$（'a'）。click（）中的外部鏈接。 – sroes

似乎以下位不起作用：

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

你要轉換的迴應「到DOM元素纔可以使用「找到' 在上面。像這樣：

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

來源

2014-12-15 13:13:27

jQuery＆history.js示例

回答

相關問題