History.pushState aracılığıyla tarihin değişimleri hakkında nasıl bildirim alabilirim?

HTML5 history.pushStatetarayıcı geçmişini değiştirmeye başladığı için, web siteleri bunu URL'nin parça tanımlayıcısını değiştirmek yerine Ajax ile birlikte kullanmaya başlar.

Ne yazık ki, bu çağrılar artık tespit edilemez anlamına gelir onhashchange.

Sorum şu: Bir web sitesinin ne zaman kullanıldığını tespit etmenin güvenilir bir yolu var mı (hack?;)) history.pushState? Spesifikasyon, ortaya çıkan olaylar hakkında hiçbir şey ifade etmiyor (en azından hiçbir şey bulamadım).
Bir cephe oluşturmaya çalıştım ve window.historykendi JavaScript nesnesimle değiştirdim , ancak hiçbir etkisi olmadı.

Daha fazla açıklama: Bu değişiklikleri algılayıp buna göre hareket etmesi gereken bir Firefox eklentisi geliştiriyorum.
Birkaç gün önce bazı DOM etkinliklerini dinlemenin etkili olup olmayacağını soran benzer bir soru olduğunu biliyorum, ancak buna güvenmemeyi tercih ederim çünkü bu olaylar çok farklı nedenlerle oluşturulabilir.

Güncelleme:

İşte bir jsfiddle (Firefox 4 veya Chrome 8 kullanın) çağrıldığında onpopstatetetiklenmeyen pushState(veya yanlış bir şey mi yapıyorum? Geliştirmek için çekinmeyin!)

Güncelleme 2:

Başka bir (yan) sorunu window.locationkullanırken güncellenmez pushState(ama ben zaten burada SO düşünüyorum bence).

5.5.9.1 Olay tanımları

Popstate bir oturum geçmiş girişine gezinirken olay bazı durumlarda ateşlenir.

Buna göre, kullandığınızda popstate'in işten çıkarılmasına gerek yok pushState. Ancak böyle bir olay pushstateişinize yarayacaktır. historyBir ana bilgisayar nesnesi olduğundan , buna dikkat etmelisiniz, ancak Firefox bu durumda iyi görünüyor. Bu kod gayet iyi çalışıyor:

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);

JSFiddle'ınız şöyle olur :

window.onpopstate = history.onpushstate = function(e) { ... }

window.history.replaceStateAynı şekilde maymun yaması yapabilirsiniz .

Not: elbette onpushstatesadece global nesneye ekleyebilir ve hatta daha fazla olayı işlemesini sağlayabilirsiniz.add/removeListener

Bunu kullanıyordum:

var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

Galambalazların yaptığı ile neredeyse aynı .

Gerçi genellikle aşırıya kaçar. Ve tüm tarayıcılarda çalışmayabilir. (Yalnızca tarayıcımın sürümünü önemsiyorum.)

(Ve bir varya bırakır _wr, bu yüzden onu falan sarmak isteyebilirsiniz. Bunu umursamadım.)

Sonunda bunu yapmak için "doğru" yolunu buldu! Uzantınıza bir ayrıcalık eklenmesini ve arka plan sayfasını (yalnızca bir içerik komut dosyası değil) kullanmasını gerektirir, ancak çalışır.

İstediğiniz etkinlik browser.webNavigation.onHistoryStateUpdated, bir sayfa historyURL'yi değiştirmek için API kullandığında tetiklenir . Yalnızca erişim iznine sahip olduğunuz siteler için tetiklenir ve ayrıca gerektiğinde spam'i daha da azaltmak için bir URL filtresi kullanabilirsiniz. webNavigationİzni (ve tabii ki ilgili alan (lar) için ev sahibi iznini gerektirir ).

Etkinlik geri araması sekme kimliğini, "yönlendirilen" URL'yi ve diğer ayrıntıları alır. Etkinlik tetiklendiğinde o sayfadaki içerik komut dosyasında bir işlem yapmanız gerekiyorsa, ilgili komut dosyasını doğrudan arka plan sayfasından enjekte edin veya portyüklendiğinde içerik komut dosyasının arka plan sayfasını açmasını sağlayın, arka plan sayfasını kaydedin bu bağlantı noktasını sekme kimliğiyle dizinlenmiş bir koleksiyonda toplayın ve etkinlik tetiklendiğinde ilgili bağlantı noktası üzerinden (arka plan komut dosyasından içerik komut dosyasına) bir mesaj gönderin.

window.onpopstateEtkinliğe bağlanabilir misiniz ?

https://developer.mozilla.org/en/DOM%3awindow.onpopstate

Dokümanlardan:

Penceredeki popstate olayı için bir olay işleyici.

Etkin geçmiş girişi her değiştiğinde pencereye bir popstate olayı gönderilir. Etkinleştirilen geçmiş girdisi history.pushState () öğesine yapılan bir çağrı tarafından oluşturulmuşsa veya history.replaceState () öğesine yapılan bir çağrıdan etkilenmişse, popstate olayının state özelliği, geçmiş girdisinin durum nesnesinin bir kopyasını içerir.

Bir Firefox eklentisi hakkında soru sorduğunuz için, işte çalışmam gereken kod. Kullanımı unsafeWindowise artık önerilmemektedir ve pushState modifiye edildikten sonra bir istemci komut dosyasından çağrıldığında dışarı hatalar:

Mülk geçmişine erişim izni reddedildi.

Bunun yerine, işlevin şöyle enjekte edilmesini sağlayan exportFunction adında bir API var window.history:

var pushState = history.pushState;

function pushStateHack (state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }

    return pushState.apply(history, arguments);
}

history.onpushstate = function(state) {
    // callback here
}

exportFunction(pushStateHack, unsafeWindow.history, {defineAs: 'pushState', allowCallbacks: true});

galambalazs maymun yamaları cevapwindow.history.pushState ve window.history.replaceStateama bir nedenle benim için çalışmayı durdurdu. İşte bu kadar hoş olmayan bir alternatif çünkü yoklama kullanıyor:

(function() {
    var previousState = window.history.state;
    setInterval(function() {
        if (previousState !== window.history.state) {
            previousState = window.history.state;
            myCallback();
        }
    }, 100);
})();

Bu konunun daha modern bir çözüme ihtiyacı olduğunu düşünüyorum.

Eminim nsIWebProgressListenergeri döndü o zaman kimse bahsetmedi şaşırdım.

Bir çerçeve yazısından (e10s uyumluluğu için):

let webProgress = docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebProgress);
webProgress.addProgressListener(this, Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | Ci.nsIWebProgress.NOTIFY_LOCATION);

Sonra dinleme onLoacationChange

onLocationChange: function onLocationChange(webProgress, request, locationURI, flags) {
       if (flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT

Görünüşe göre tüm pushState'leri yakalayacak. Ancak "pushState için AYRICA tetikler" uyarısı da vardır. Bu yüzden, sadece itmeli öğeler olduğundan emin olmak için burada biraz daha filtreleme yapmamız gerekiyor.

Dayanarak: https://github.com/jgraham/gecko/blob/55d8d9aa7311386ee2dabfccb481684c8920a527/toolkit/modules/addons/WebNavigation.jsm#L18

Ve: kaynak: //gre/modules/WebNavigationContent.js

Peki, ben pushStateözelliğini değiştirmek için birçok örnek görüyorum historyama bunun iyi bir fikir olduğundan emin değilim, sadece push durumunu kontrol etmek değil, durumu değiştirmek için tarihe benzer bir API ile bir hizmet olayı oluşturmayı tercih ederim ve küresel tarih API'sine dayanmayan diğer birçok uygulamanın kapılarını açar. Lütfen aşağıdaki örneği kontrol edin:

function HistoryAPI(history) {
    EventEmitter.call(this);
    this.history = history;
}

HistoryAPI.prototype = utils.inherits(EventEmitter.prototype);

const prototype = {
    pushState: function(state, title, pathname){
        this.emit('pushstate', state, title, pathname);
        this.history.pushState(state, title, pathname);
    },

    replaceState: function(state, title, pathname){
        this.emit('replacestate', state, title, pathname);
        this.history.replaceState(state, title, pathname);
    }
};

Object.keys(prototype).forEach(key => {
    HistoryAPI.prototype = prototype[key];
});

EventEmitterTanıma ihtiyacınız varsa , yukarıdaki kod NodeJS olay yayıcısına dayanır: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/events.js . utils.inheritsuygulama burada bulunabilir: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/util.js#L970

Ben bu basit uygulama sadece bir olay gönderir ve history.pushState () döndüren eventedPush durumu adlı kendi işlevini oluşturmak yerine yerel tarih yönteminin üzerine yazmak istemem. Her iki şekilde de iyi çalışıyor, ancak yerel yöntemler gelecekteki geliştiricilerin beklediği gibi çalışmaya devam edeceği için bu uygulamayı biraz daha temiz buluyorum.

function eventedPushState(state, title, url) {
    var pushChangeEvent = new CustomEvent("onpushstate", {
        detail: {
            state,
            title,
            url
        }
    });
    document.dispatchEvent(pushChangeEvent);
    return history.pushState(state, title, url);
}

document.addEventListener(
    "onpushstate",
    function(event) {
        console.log(event.detail);
    },
    false
);

eventedPushState({}, "", "new-slug"); 

@Gblazex tarafından verilen çözüme dayanarak , aynı yaklaşımı izlemek, ancak ok işlevlerini kullanmak istiyorsanız, javascript mantığınızda aşağıdaki örneği izleyin:

private _currentPath:string;    
((history) => {
          //tracks "forward" navigation event
          var pushState = history.pushState;
          history.pushState =(state, key, path) => {
              this._notifyNewUrl(path);
              return pushState.apply(history,[state,key,path]); 
          };
        })(window.history);

//tracks "back" navigation event
window.addEventListener('popstate', (e)=> {
  this._onUrlChange();
});

Ardından, _notifyUrl(url)geçerli sayfa URL'si güncellendiğinde (sayfa hiç yüklenmemiş olsa bile) ihtiyacınız olabilecek işlemleri tetikleyen başka bir işlev uygulayın

  private _notifyNewUrl (key:string = window.location.pathname): void {
    this._path=key;
    // trigger whatever you need to do on url changes
    console.debug(`current query: ${this._path}`);
  }

Sadece yeni URL'yi istediğimden, @gblazex ve @Alberto S. kodlarını uyarlamak için uyarladım:

(function(history){

  var pushState = history.pushState;
    history.pushState = function(state, key, path) {
    if (typeof history.onpushstate == "function") {
      history.onpushstate({state: state, path: path})
    }
    pushState.apply(history, arguments)
  }
  
  window.onpopstate = history.onpushstate = function(e) {
    console.log(e.path)
  }

})(window.history);

Yapabilseniz bile yerel işlevleri değiştirmenin iyi bir fikir olduğunu düşünmüyorum ve her zaman uygulama kapsamınızı korumalısınız, bu nedenle iyi bir yaklaşım, küresel pushState işlevini kullanmak değil, kendinizinkini kullanın:

function historyEventHandler(state){ 
    // your stuff here
} 

window.onpopstate = history.onpushstate = historyEventHandler

function pushHistory(...args){
    history.pushState(...args)
    historyEventHandler(...args)
}

<button onclick="pushHistory(...)">Go to happy place</button>

Başka bir kod yerel pushState işlevini kullanırsa, bir olay tetikleyicisi almayacağınıza dikkat edin (ancak bu gerçekleşirse, kodunuzu kontrol etmeniz gerekir)

Standart durumlar olarak:

Sadece history.pushState () veya history.replaceState () öğesinin çağrılmasının bir popstate olayını tetiklemeyeceğini unutmayın. Popstate olayı yalnızca geri düğmesini tıklamak (veya JavaScript'te history.back () öğesini aramak gibi) bir tarayıcı eylemi gerçekleştirerek tetiklenir.

WindowEventHandlers.onpopstate tetikleyicisine history.back () yöntemini çağırmamız gerekir

Öyle insted:

history.pushState(...)

yapmak:

history.pushState(...)
history.pushState(...)
history.back()