web-dev-qa-db-ja.com

jQueryとhistory.jsの例

JQueryでhistory.jsを使用するときに少し問題があります。ナビゲーションセットを[戻る]ボタンで機能させたいと思っただけです（これは非常にうまく機能しているようです）。しかしながら。 [戻る]ボタンをクリックすると、URLは古いものに変わります（これもまた適切で、私が望んでいるものです）が、コンテンツが本来のように置き換えられません。

これをもう少しわかりやすくするために、いくつかのコードを示します。

    <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（）を使用してニースで簡単に実行されるコンテンツへのページのロードです。次に、ユーザーが使用する場合は、[戻る]ボタンでページを逆方向に移動します。現時点ではURLは変更されますが、ボックス内のコンテンツは変更されません。それを変更または修正するにはどうすればよいですか？

jqueryhtmlhistory.js
13
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>
37
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());
});
2
Tom Walter