0

ajaxナビゲーションを備えたWebアプリがあれば、html5の履歴ナビゲーションを利用するつもりです。

ただし、popstateイベントにバインドすると、トリガーされません。次の場合は、ページの読み込みを除きます。

HTML5が利用可能な場合（正しく検出されれば、デモはChromeでもFFと同様に機能します）：

// Callback
function historyChangeHandler(data) {
    console.log(data);
}

// Bind
$(window).bind('popstate', historyChangeHandler);


// Trigger
$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    return false;
});

動作しないもの：

  • リンクをクリックしても、popstateコールバックhistoryChangeHandler（）は呼び出されません。つまり、クリックされたものは印刷されますが、イベントは印刷されません。

私が試したこと：

  • setTimeoutを使用してpushState呼び出しを延期します。
  • e.preventDefault（）; falseではなくtrueを返します
  • また、div-sにアタッチして、trueを返します

何が機能しますか：

  • historyChangeHandler（）は、ページの読み込み時に呼び出されます。
  • historyChangeHandler（）は、戻るボタンを押すと呼び出されます。
  • historyChangeHandler（）は、進むボタンを押すと呼び出されます。
  • コンソールからhistory.pushState（{url： "/ test"}、 ""、 "/ test"）を呼び出す場合は、historyChangeHandler（）！

私が見逃している手がかりはありますか？

4

2 に答える 2

2

popstateリンクをクリックしたときに呼び出されることは想定されていません。ユーザーが戻る/進むボタンでナビゲートしたときに呼び出されます。

すべてが想定どおりに機能しています。

于 2012-03-10T22:58:30.177 に答える
1

popstate イベントを発生させる必要があるのはなぜですか? 関数を呼び出さないのはなぜですか？

$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    historyChangeHandler({url: url});
    return false;
});
于 2012-03-10T22:56:08.820 に答える