1

過去数時間、 History.jsを学ぶために無駄に努力してきました。非常に単純なテスト ファイルを 3 つ作成しましたが、何も機能していないようです。これが私の3つのファイルの内容です。

history.html:

<!doctype html>
<html>
    <head>
        <title>History Test</title>
        <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="jquery.history.js"></script>
        <script type="text/javascript" src="history.js"></script>
    </head>
    <body>
        <a href="about.html">about</a>
    </body>
</html>

history.js:

$(document).ready(function() {
    History.Adapter.bind(window, 'statechange', handleStateChange);
});

function handleStateChange() {
    alert("State changed...");
}

about.html:

<!doctype html>
<html>
    <head>
        <title>About</title>
    </head>
    <body>
        About...
    </body>
</html>

「about」リンクをクリックしても、statechange イベントが発生しないか、handleStateChange() 関数が実行されないのはなぜですか?

4

1 に答える 1

1

他の人に役立つ場合に備えて、自分の質問に答えます。私は、ブラウザの URL が変更されると (たとえば、リンクをクリックするか、戻るボタンをクリックすると) 'statechange' イベントが発生するという誤った印象を受けていました。私が発見したのは、「statechange」は、履歴に何かをプッシュしたときにのみ起動するということです。そこで、リンクにリスナーを追加するように JavaScript を更新しました...

history.js:

$(document).ready(function() {
    History.Adapter.bind(window, 'statechange', handleStateChange);
    $("#about").click(function() {
        History.pushState(null, null, "about.html");
    });
});

function handleStateChange() {
    alert("State changed...");
}

...そして、リンクをクリックしたときとブラウザの戻るボタンをクリックしたときにアラートが表示されるようになりました。

于 2013-06-20T14:20:48.147 に答える