Bagaimana cara mendapat pemberitahuan tentang perubahan riwayat melalui history.pushState?

Jadi sekarang HTML5 memperkenalkan history.pushStateuntuk mengubah riwayat browser, situs web mulai menggunakan ini dalam kombinasi dengan Ajax alih-alih mengubah pengidentifikasi fragmen URL.

Sayangnya itu berarti bahwa panggilan tersebut tidak dapat dideteksi lagi oleh onhashchange.

Pertanyaan saya adalah: Apakah ada cara yang dapat diandalkan (hack?;)) Untuk mendeteksi kapan situs web menggunakan history.pushState? Spesifikasinya tidak menyatakan apa pun tentang peristiwa yang dimunculkan (setidaknya saya tidak dapat menemukan apa pun).
Saya mencoba membuat fasad dan diganti window.historydengan objek JavaScript saya sendiri, tetapi tidak memiliki efek sama sekali.

Penjelasan lebih lanjut: Saya sedang mengembangkan add-on Firefox yang perlu mendeteksi perubahan ini dan bertindak sesuai.
Saya tahu ada pertanyaan serupa beberapa hari yang lalu yang menanyakan apakah mendengarkan beberapa acara DOM akan efisien tetapi saya lebih suka tidak mengandalkan itu karena peristiwa ini dapat dihasilkan karena banyak alasan berbeda.

Memperbarui:

Berikut ini adalah jsfiddle (gunakan Firefox 4 atau Chrome 8) yang menunjukkan bahwa onpopstatetidak terpicu ketika pushStatedipanggil (atau saya melakukan sesuatu yang salah? Jangan ragu untuk memperbaikinya!).

Pembaruan 2:

Masalah (sisi) lain adalah yang window.locationtidak diperbarui saat menggunakan pushState(tapi saya membaca tentang ini sudah ada di sini pada SO saya pikir).

5.5.9.1 Definisi acara

Acara popstate dipecat dalam kasus tertentu ketika menavigasi ke entri riwayat sesi.

Menurut ini, tidak ada alasan popstate untuk dipecat saat Anda menggunakan pushState. Tetapi acara seperti itu pushstateakan berguna. Karena historyini adalah objek host, Anda harus berhati-hati dengannya, tetapi Firefox tampaknya baik dalam hal ini. Kode ini berfungsi dengan baik:

(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 Anda menjadi :

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

Anda bisa menambal monyet window.history.replaceStatedengan cara yang sama.

Catatan: tentu saja Anda dapat menambahkan onpushstatehanya ke objek global, dan Anda bahkan dapat membuatnya menangani lebih banyak acara melaluiadd/removeListener

Saya menggunakan ini:

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!');
});

Ini hampir sama dengan galambalaz .

Tapi biasanya itu berlebihan. Dan itu mungkin tidak bekerja di semua browser. (Saya hanya peduli dengan versi browser saya.)

(Dan itu meninggalkan var _wr, jadi kamu mungkin ingin membungkusnya atau sesuatu. Aku tidak peduli tentang itu.)

Akhirnya menemukan cara yang "benar" untuk melakukan ini! Perlu menambahkan hak istimewa untuk ekstensi Anda dan menggunakan halaman latar belakang (bukan hanya skrip konten), tetapi itu berfungsi.

Acara yang Anda inginkan adalah browser.webNavigation.onHistoryStateUpdated, yang dipecat ketika halaman menggunakan historyAPI untuk mengubah URL. Ini hanya diaktifkan untuk situs yang Anda memiliki izin untuk mengakses, dan Anda juga dapat menggunakan filter URL untuk lebih mengurangi spam jika Anda perlu. Ini memerlukan webNavigationizin (dan tentu saja izin host untuk domain yang relevan).

Callback acara mendapatkan ID tab, URL yang sedang "dinavigasi", dan detail lainnya. Jika Anda perlu mengambil tindakan dalam skrip konten pada halaman tersebut saat acara dimulai, menyuntikkan skrip yang relevan langsung dari halaman latar belakang, atau meminta skrip konten membuka a portke halaman latar belakang saat memuat, minta halaman latar disimpan port itu dalam koleksi yang diindeks oleh ID tab, dan mengirim pesan melintasi port yang relevan (dari skrip latar belakang ke skrip konten) saat acara diaktifkan.

Anda dapat mengikat ke window.onpopstateacara tersebut?

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

Dari dokumen:

Penangan acara untuk acara popstate di jendela.

Acara popstate dikirim ke jendela setiap kali entri riwayat aktif berubah. Jika entri riwayat yang diaktifkan dibuat oleh panggilan ke history.pushState () atau dipengaruhi oleh panggilan ke history.replaceState (), properti keadaan acara popstate berisi salinan objek keadaan entri sejarah.

Karena Anda bertanya tentang addon Firefox, inilah kode yang harus saya gunakan. Menggunakan unsafeWindowini tidak lagi direkomendasikan , dan kesalahan ketika pushState dipanggil dari script klien setelah dimodifikasi:

Izin ditolak untuk mengakses history.pushState properti

Sebagai gantinya, ada API yang disebut exportFunction yang memungkinkan fungsi untuk disuntikkan ke dalam window.historyseperti ini:

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

jawaban monyet galambalazswindow.history.pushState dan window.history.replaceState, tetapi untuk beberapa alasan berhenti bekerja untuk saya. Inilah alternatif yang tidak sebaik karena menggunakan polling:

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

Saya pikir topik ini membutuhkan solusi yang lebih modern.

Saya yakin nsIWebProgressListenerada sekitar saat itu saya terkejut tidak ada yang menyebutkannya.

Dari sebuah skrip frame (untuk kompatibilitas e10s):

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

Kemudian mendengarkan di onLoacationChange

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

Itu tampaknya akan menangkap semua pushState. Tetapi ada peringatan komentar bahwa itu "JUGA memicu untuk pushState". Jadi kita perlu melakukan lebih banyak penyaringan di sini untuk memastikan itu hanya hal-hal pushstate.

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

Dan: sumber daya: //gre/modules/WebNavigationContent.js

Yah, saya melihat banyak contoh untuk mengganti pushStateproperti historytetapi saya tidak yakin itu ide yang bagus, saya lebih suka untuk membuat acara layanan berbasis dengan API yang mirip dengan sejarah dengan cara itu Anda dapat mengontrol tidak hanya push state tetapi ganti state juga dan itu membuka pintu bagi banyak implementasi lainnya yang tidak mengandalkan API sejarah global. Silakan periksa contoh berikut:

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];
});

Jika Anda memerlukan EventEmitterdefinisi, kode di atas didasarkan pada emitor acara NodeJS: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/events.js . utils.inheritsimplementasi dapat ditemukan di sini: https://github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/util.js#L970

Saya lebih suka tidak menimpa metode sejarah asli sehingga implementasi sederhana ini membuat fungsi saya sendiri yang disebut stateedPush state yang hanya mengirimkan suatu peristiwa dan mengembalikan history.pushState (). Either way berfungsi dengan baik tetapi saya menemukan implementasi ini sedikit lebih bersih karena metode asli akan terus berkinerja seperti yang diharapkan pengembang di masa depan.

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"); 

Berdasarkan solusi yang diberikan oleh @gblazex , jika Anda ingin mengikuti pendekatan yang sama, tetapi menggunakan fungsi panah, ikuti contoh di bawah ini dalam logika javascript Anda:

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();
});

Kemudian, terapkan fungsi lain _notifyUrl(url)yang memicu tindakan apa pun yang diperlukan yang mungkin Anda perlukan saat url halaman saat ini diperbarui (bahkan jika halaman belum dimuat sama sekali)

  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}`);
  }

Karena saya hanya menginginkan URL baru, saya telah mengadaptasi kode @gblazex dan @Alberto S. untuk mendapatkan ini:

(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);

Saya tidak berpikir itu ide yang baik untuk memodifikasi fungsi asli bahkan jika Anda bisa, dan Anda harus selalu menjaga ruang lingkup aplikasi Anda, jadi pendekatan yang baik tidak menggunakan fungsi pushState global, sebaliknya, gunakan salah satu dari Anda sendiri:

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>

Perhatikan bahwa jika ada kode lain yang menggunakan fungsi pushState asli, Anda tidak akan mendapatkan pemicu acara (tetapi jika ini terjadi, Anda harus memeriksa kode Anda)

Sebagai negara standar:

Perhatikan bahwa hanya memanggil history.pushState () atau history.replaceState () tidak akan memicu peristiwa popstate. Acara popstate hanya dipicu dengan melakukan tindakan browser seperti mengklik tombol kembali (atau memanggil history.back () dalam JavaScript)

kita perlu memanggil history.back () ke trigeer WindowEventHandlers.onpopstate

Jadi insted dari:

history.pushState(...)

melakukan:

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