Sayfanın Chrome'da yüklendiğinde popstate

Web uygulamam için History API kullanıyorum ve bir sorunla karşılaşıyorum. Sayfadaki bazı sonuçları güncellemek için Ajax çağrıları yapıyorum ve tarayıcının konum çubuğunu sayfayı yeniden yüklemeden güncellemek için history.pushState () kullanıyorum . Daha sonra, tabii ki, geri düğmesi tıklandığında önceki durumu geri yüklemek için window.popstate kullanıyorum .

Sorun iyi biliniyor - Chrome ve Firefox bu popstate olayını farklı şekilde ele alıyor. Firefox ilk yüklemede onu çalıştırmazken, Chrome bunu yapıyor. Firefox tarzı olmasını istiyorum ve olayı yüklerken tetiklememek istiyorum, çünkü sonuçları yüklerken tamamen aynı olanlarla güncelliyor. History.js kullanmanın dışında bir çözüm var mı ? Kullanmak istemememin nedeni - kendi başına çok fazla JS kitaplığına ihtiyaç duyması ve zaten çok fazla JS içeren bir CMS'de uygulanmasına ihtiyacım olduğundan, JS'yi en aza indirmek istiyorum. .

Bu nedenle, Chrome'un yükleme sırasında 'popstate'i çalıştırmamasını sağlamanın bir yolu olup olmadığını veya belki de birisinin tüm kitaplıklar tek bir dosyada birleştirildiği için History.js'yi kullanmaya çalışıp çalışmadığını bilmek isteriz.

Sürüm 19'daki Google Chrome'da @ spliter'ın çözümü çalışmayı durdurdu. @Johnnymire'ın da belirttiği gibi, Chrome 19'da history.state var, ancak boş.

Çözümüm , window.history'de durum olup olmadığını kontrol etmek için window.history.state! == null eklemektir :

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

Bunu tüm büyük tarayıcılarda ve Chrome 19 ve 18 sürümlerinde test ettim. Çalışıyor gibi görünüyor.

Onpopstate'e eklediğiniz her bir işleyici için özel önlemler almak istemiyorsanız, çözümüm sizin için ilginç olabilir. Bu çözümün büyük bir artısı da onpopstate olaylarının sayfa yüklemesi tamamlanmadan önce ele alınabilmesidir.

Herhangi bir onpopstate işleyicisi eklemeden önce bu kodu bir kez çalıştırın ve her şey beklendiği gibi çalışmalıdır (diğer adıyla Mozilla ^^) .

(function() {
    // There's nothing to do for older browsers ;)
    if (!window.addEventListener)
        return;
    var blockPopstateEvent = document.readyState!="complete";
    window.addEventListener("load", function() {
        // The timeout ensures that popstate-events will be unblocked right
        // after the load event occured, but not in the same event-loop cycle.
        setTimeout(function(){ blockPopstateEvent = false; }, 0);
    }, false);
    window.addEventListener("popstate", function(evt) {
        if (blockPopstateEvent && document.readyState=="complete") {
            evt.preventDefault();
            evt.stopImmediatePropagation();
        }
    }, false);
})();

Nasıl çalışır:

Chrome , Safari ve muhtemelen diğer webkit tarayıcıları, belge yüklendiğinde onpopstate olayını tetikler. Bu amaçlanmamıştır, bu nedenle, belge yüklendikten sonraki ilk olay döngü döngüsüne kadar popstate olaylarını engelleriz. Bu, preventDefault ve stopImmediatePropagation çağrılarıyla yapılır (stopPropagation stopImmediatePropagation'ın aksine, tüm olay işleyici çağrılarını anında durdurur).

Ancak, Chrome yanlışlıkla patladığında, belgenin readyState'i zaten "tamamlandı" olduğundan, belge yüklenmeden önce onpopstate çağrılarına izin vermek için belge yükleme tamamlanmadan önce tetiklenen opopstate olaylarına izin veriyoruz.

Güncelleme 2014-04-23: Sayfa yüklendikten sonra komut dosyası çalıştırılırsa popstate olaylarının engellenmesine neden olan bir hata düzeltildi.

Sadece setTimeout kullanmak doğru bir çözüm değildir çünkü içeriğin yüklenmesinin ne kadar süreceği hakkında hiçbir fikriniz yoktur, bu nedenle zaman aşımından sonra popstate olayının yayınlanması mümkündür.

İşte benim çözümüm: https://gist.github.com/3551566

/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
  setTimeout(function() {
    window.addEventListener('popstate', function() {
      ...
    });
  }, 0);
});

Çözüm, jquery.pjax.js 195-225 satırlarında bulundu:

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href


// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if ( initialPop ) return

  var state = event.state

  if ( state && state.pjax ) {
    var container = state.pjax
    if ( $(container+'').length )
      $.pjax({
        url: state.url || location.href,
        fragment: state.fragment,
        container: container,
        push: false,
        timeout: state.timeout
      })
    else
      window.location = location.href
  }
})

Pjax'ı yeniden uygulamadan daha doğrudan bir çözüm, pushState'te bir değişken ayarlamak ve değişkeni popState üzerinde kontrol etmektir, böylece ilk popState, yükte tutarsız bir şekilde çalışmaz (jquery'ye özgü bir çözüm değil, yalnızca olaylar için kullanarak):

$(window).bind('popstate', function (ev){
  if (!window.history.ready && !ev.originalEvent.state)
    return; // workaround for popstate on load
});

// ... later ...

function doNavigation(nextPageId) {
  window.history.ready = true;

  history.pushState(state, null, 'content.php?id='+ nextPageId); 
  // ajax in content instead of loading server-side
}

Webkit'in ilk onpopstate olayına atanmış bir durum yoktur, bu nedenle istenmeyen davranışı kontrol etmek için bunu kullanabilirsiniz:

window.onpopstate = function(e){
    if(e.state)
        //do something
};

Orijinal sayfaya geri dönmeye izin veren kapsamlı bir çözüm, bu fikir üzerine inşa edilecektir:

<body onload="init()">
    <a href="page1" onclick="doClick(this); return false;">page 1</a>
    <a href="page2" onclick="doClick(this); return false;">page 2</a>
    <div id="content"></div>
</body>

<script>
function init(){
   openURL(window.location.href);
}
function doClick(e){
    if(window.history.pushState)
        openURL(e.getAttribute('href'), true);
    else
        window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
    document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser'); 
    if(window.history.pushState){
        if(push)
            window.history.pushState({href: href}, 'your page title', href);
        else
            window.history.replaceState({href: href}, 'your page title', href);
    }
}
window.onpopstate = function(e){
    if(e.state)
        openURL(e.state.href);
};
</script>

Bu olsa olabilir hala (bazı şık navigasyon) iki kez ateş, önceki href karşı bir çek ile basitçe ele alınabilir.

Bu benim çözümüm.

window.setTimeout(function() {
  window.addEventListener('popstate', function() {
    // ...
  });
}, 1000);

İşte benim çözümüm:

var _firstload = true;
$(function(){
    window.onpopstate = function(event){
        var state = event.state;

        if(_firstload && !state){ 
            _firstload = false; 
        }
        else if(state){
            _firstload = false;
            // you should pass state.some_data to another function here
            alert('state was changed! back/forward button was pressed!');
        }
        else{
            _firstload = false;
            // you should inform some function that the original state returned
            alert('you returned back to the original state (the home state)');
        }
    }
})   

Bir sayfa yüklenirken Chrome'un popstate'i çalıştırmamasının en iyi yolu, https://code.google.com/p/chromium/issues/detail?id=63040 oy kullanmaktır . Chrome'un iki tam yıldır HTML5 spesifikasyonuna uymadığını biliyorlar ve hala düzeltmediler!

Kullanım durumunda event.state !== nullgeçmişte ilk yüklenen sayfaya geri dönmek mobil olmayan tarayıcılarda çalışmayacaktır. Ajax navigasyonunun ne zaman başladığını işaretlemek için sessionStorage kullanıyorum.

history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;

window.addEventListener('popstate', function(e) {
    if (sessionStorage.ajNavStarted) {
        location.href = (e.state === null) ? location.href : e.state;
    }
}, false);

Sunulan çözümlerin sayfanın yeniden yüklenmesinde bir sorunu var. Aşağıdakiler daha iyi çalışıyor gibi görünüyor, ancak yalnızca Firefox ve Chrome'u test ettim. e.event.stateVe arasında bir fark varmış gibi görünen gerçekliği kullanır window.history.state.

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

Karşı sorduğunuzu biliyorum, ancak bir milyon tarayıcı uyumsuzluğunu temizlediği için gerçekten sadece History.js kullanmalısınız. Manuel düzeltme rotasına, ancak daha sonra, yolun sonunda bulacağınız daha fazla sorun olduğunu bulmak için gittim. Bugünlerde gerçekten o kadar zor değil:

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

Ve api'yi https://github.com/browserstate/history.js adresinde okuyun.

Bu benim için sorunu çözdü. Tek yaptığım, pageload sırasında tetiklenen popstate olayını kaçıracak kadar uzun süre işlevin yürütülmesini geciktiren bir zaman aşımı işlevi ayarlamaktı.

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

Bir olay oluşturabilir ve yükleme işleyicinizden sonra onu tetikleyebilirsiniz.

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

Bu, Chrome / Safari'de biraz bozuldu, ancak yamayı WebKit'e gönderdim ve yakında kullanıma sunulacak, ancak bu "en doğru" yoldur.

Bu benim için Firefox ve Chrome'da çalıştı

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};