web-dev-qa-db-ja.com

history.popstateが最初のページ読み込みでトリガーされないようにできますか？

私は、AJAXを介してコンテンツを提供するサイトで作業しています。

メニューの項目をクリックすると、コンテンツdivが$.get応答で更新されますが、何も凝ったものではありません。

history.pushStateを実装して、ブラウザの戻る/進むボタンを使用したナビゲーションを可能にします。

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

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

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

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

javascriptjqueryhistorygetscriptpopstate
25
jassa

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

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

これは、より長い記事の一部です Intelligent State Handling hashbang、ハッシュ、およびhtml5 history apiについて説明します。

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

37
balupton

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);
  }
});
23
mech

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

window.onpopstate = function (event) {
  if (event.state) {
    // do your thing
  } else {
    // triggered by a page load
  }
}
8
Oliver Nightingale

ブラウザが最初に読み込まれると、常にpopstateイベントが発生します。したがって、この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);

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

4
sydlawrence

これを使用してバーのアドレスを変更し、現在のhtml本文を含む現在の状態を保存し、他のajax呼び出しなしで戻るボタンのクリックでそれをリロードします。すべてがブラウザに保存されます：

  1. $(document).ajaxComplete(function(ev, jqXHR, settings) {

    var stateObj = { url: settings.url, innerhtml: document.body.innerHTML };
    window.history.pushState(stateObj, settings.url, settings.url);
});


window.onpopstate = function (event) {
    var currentState = history.state;
    document.body.innerHTML = currentState.innerhtml;
};
0
ghooz