1

にアクセスするとHistory.js次のコードが機能しますindex.htmlが、直接アクセスしようとするとindex.html?info、インデックスのコンテンツが表示されます。誰かが直接アクセスしようとしたときに、状態をどのように正確に検出することになっていますindex.html?infoか? また、初期状態もちゃんとできているか自信がありません。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>title</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.history.js"></script>
</head>
<body>

    <div id="content"></div>

    <script>
        History.Adapter.bind(window, 'statechange', function() {
            var id = History.getState().data.id;

            if (id == "index") {
                $('#content').html('<button id="btn" type="button">get info</button>');
                $('#btn').click(function() {
                   History.pushState({ id: "info" }, '', '?info'); 
                });
            }

            if (id == "info") {
                $('#content').html('here is some info');
            }
        });

        History.pushState({ id: "index" }, '', '?index'); //do this otherwise nothing loads on first run
    </script>

</body>
</html>
4

1 に答える 1

1

あなたの例では、常にインデックスの状態をプッシュしています。あなたができることは次のようなものです: History.pushState の代わりに次のように書きます:

var p = window.location.search.replace( "?", "" ); //this gets you the parameter
History.replaceState({id: p}, '', '?'+p);

ただし、履歴の状態は更新時に保持されるため、状態が変更されないため、ページを更新しても statechange イベントは発生しません。

したがって、これを回避するには、次のようなものが必要になります。

var historyFired = false;

function onHistory() {
  //put code previously in your statechange hanlder here
  historyFired = true;
}

History.Adapter.bind(window,'statechange',onHistory);

var p = window.location.search.replace( "?", "" ); //this gets you the parameter
History.replaceState({id: p}, '', '?'+p);

if (!historyFired) onHistory();

ちょっとしたハックですが、やりたいことを実行します。

于 2013-10-26T20:43:06.000 に答える