25

AJAX 経由でコンテンツを提供するサイトに取り組んでいます。

メニューのアイテムをクリックすると、コンテンツ div が$.get応答で更新されますが、特別なことは何もありません。

history.pushStateブラウザの戻る/進むボタンでナビゲーションできるように実装しています。

履歴ナビゲーションにコンテンツをロードするには、次のものが必要です。

$(function() {
    $(window).bind("popstate", function() {
        $.getScript(location.href); 
    });
});

問題は、ページが初めてロードされるときに、この関数が$.getScriptページをすぐに再度ロードすることです。ページが最初にロードされると最初の HTML ビューがレンダリングされ、2 回目のロードでは JS ビューがレンダリングされます。これは JS リクエストであるためです。

HTML リクエストのあるページでこのイベントが発生しないようにするにはどうすればよいですか?

4

5 に答える 5

38

ネイティブの HTML5 History API を使用すると、いくつかの問題が発生します。HTML5 ブラウザごとに API の処理が少し異なります。そのため、一度コーディングしただけでは、回避策を実装せずに動作することを期待することはできません。History.jsは、HTML5 History API 用のクロスブラウザー API と、hashchangeそのルートをたどりたい場合に HTML4 ブラウザー用のオプションのフォールバックを提供します。

Web サイトを RIA/Ajax アプリケーションにアップグレードするには、次のコード スニペットを使用できます: https://github.com/browserstate/ajaxify

これは、hashbang、ハッシュ、および html5 履歴 API に関する説明に入る、より長い記事Intelligent State Handlingの一部です。

さらにサポートが必要な場合はお知らせください :) 乾杯。

于 2011-03-07T18:38:44.453 に答える
23

event.originalEvent を取得する必要があります

// Somewhere in your previous code
if (history && history.pushState) {
  history.pushState({module:"leave"}, document.title, this.href);
}


$(window).bind("popstate", function(evt) {
  var state = evt.originalEvent.state;
  if (state && state.module === "leave") {
    $.getScript(location.href);
  }
});
于 2011-03-23T06:48:27.150 に答える
8

popstateイベントがページの読み込み時に発生すると、イベントオブジェクトにstateプロパティがありません。これにより、ページの読み込み時にイベントが発生したかどうかを確認できます。

window.onpopstate = function (event) {
  if (event.state) {
    // do your thing
  } else {
    // triggered by a page load
  }
}
于 2011-03-07T14:24:16.357 に答える
4

ブラウザが最初に読み込まれると、常にpopstateイベントが発生します。したがって、このポップステートが自分のものであるかどうかを判断する必要があります。

pushStateを実行するときは、状態オブジェクトがあることを確認してください。そうすれば、後で確認できます。

次に、popstateハンドラーで、状態オブジェクトを確認します:)

$(function() {
    $(window).bind("popstate", function(data) {
        if (data.state.isMine)
            $.getScript(location.href); 
    });
});

// then add the state object
history.pushState({isMine:true},title,url);

さらにサポートが必要な場合はお知らせください:)

于 2011-03-06T13:37:04.940 に答える