12

私はpjaxを使用して小さなサイトで動作するようにブラウザの戻るボタンを進めようとしており、クラスの変更とさまざまなオーバーレイのフェードインおよびフェードアウトを処理するための次のコードを考え出しました。

しかし、ChromeとSafariは最初のページの読み込みをポップステートとして扱うため、私は悲しみを感じています。これを止める方法はありますか？

$(window).on("popstate", function() {
  if ($('body').hasClass('info')) {
    $('body').removeClass("info").addClass("work");
    $('.info_overlay').fadeOut(duration);
    alert('popstate');

  } else if ($('body').hasClass('work')) {
    $('body').removeClass("work").addClass("info");
    $('.info_overlay').fadeIn(duration);    

  } else {
    $('body').removeClass("project").addClass("work");
    $('.project_overlay').fadeOut(duration);
  }
});
4

5 に答える 5

29

呼び出すときに状態にタグを付け、タグが付いていないすべてのイベントをpushState()無視します。popstate例えば

history.pushState({ myTag: true }, ...)

$(window).on("popstate", function(e) {
  if (!e.originalEvent.state.myTag) return; // not my problem
  // rest of your popstate handler goes here
}

replaceState最初のページの読み込みに戻ったときにポップステートを処理できるように、ページの読み込み時に呼び出すことを忘れないでください。

$(function() { history.replaceState({ myTag: true }); });
于 2012-05-26T11:03:51.170 に答える
3

私は実際にpjax自体の中に解決策を見つけました。

行う代わりに： 

$(window).on('popstate', function() { ...

これは、私が行った最初のページの読み込み時にポップステートを起動しました。

$(window).on('pjax:popstate', function() {...
于 2012-05-26T20:26:34.797 に答える
2

長期的な最善の修正は、https：//code.google.com/p/chromium/issues/detail？id =63040に賛成票を投じてGoogleに修正を依頼することです。彼らは、約2年間、HTML5仕様に準拠していないことを知っています。

于 2013-12-04T21:20:50.483 に答える
1

サファリおよびクロームブラウザでのポップステートとしての初期ページロードを解決するために、SetTimeOut関数を使用できます。

これは簡単に機能します!! 

  setTimeout( function() {
      window.addEventListener( 'popstate', myFunction, false );
    }, 500 );
于 2016-03-08T11:19:19.960 に答える
0 
var StateHelper = {

    pushState: function(url) {
        if(window.history.pushState) {
            window.history.pushState({"popstate": true}, '', url);
        }
    },

    updateStateData: function(stateData) {
        if(window.history.replaceState) {
            window.history.replaceState(stateData, '', window.location.href);
        }
    }
};

/**
 * NOTE: Webkit fires popstate event initial. So we modify the current state, but in the
 * event we still get null. So we can differentiate.
 */
StateHelper.updateStateData({"popstate": true});
window.addEvent('popstate', function(e) {
    if(e.event.state && e.event.state.popstate) {
        window.fireEvent('pophistory', e);
    }
});

（mootoolsソリューション）

于 2015-07-15T10:19:42.767 に答える