JavaScript tidak memuat semula untuk melaksanakan kemahiran functions_javascript ke hadapan dan ke belakang pelayar

Saya sedang belajar backbone baru-baru ini Untuk memahami backbone, anda mesti memahami spa terlebih dahulu, anda mesti memahami bagaimana aplikasi satu halaman boleh menukar URL tanpa memuat semula halaman.

Berbanding dengan melompat ke halaman yang berbeza, AJAX boleh dikatakan telah meningkatkan pengalaman menyemak imbas pengguna. Ia adalah sangat menyenangkan untuk tidak melihat skrin putih antara suis halaman. Walau bagaimanapun, banyak aplikasi AJAX awal tidak menyokong fungsi ke hadapan dan ke belakang penyemak imbas Ini menyebabkan pengguna tidak kira di mana mereka menyemak imbas di tapak web, mereka akan segera kembali ke kedudukan asal setelah dimuat semula, dan pengguna tidak dapat menggunakan penyemak imbas. fungsi ke hadapan dan ke belakang untuk menukar sejarah penyemakan imbas.

Untuk masalah pertama, ia agak mudah untuk diselesaikan Hanya gunakan kuki atau localStorage untuk merekodkan status aplikasi, baca status ini apabila memuat semula halaman, dan kemudian hantar permintaan ajax yang sepadan untuk menukar halaman. Tetapi masalah kedua sangat menyusahkan Mari kita bercakap tentang penyelesaian pelayar moden terlebih dahulu.

Penyelesaian HTML5

Untuk memahami cara HTML5 melaksanakan ke hadapan dan ke belakang, anda mesti terlebih dahulu memahami objek sejarah dan objek lokasi.

objek sejarah

Sifat objek sejarah

1.panjang: Mengembalikan bilangan URL dalam senarai sejarah penyemak imbas Setiap kali pengguna melawat halaman dalam tab semasa, bilangan ini meningkat sebanyak 1. Atas sebab privasi, kandungan khusus URL tidak kelihatan.
2.state: Objek yang berkaitan dengan URL semasa, yang hanya boleh ditambah atau diubah suai melalui pushState dan replaceState. Kita boleh menggunakannya untuk menyimpan maklumat yang berkaitan dengan url.

Kaedah objek sejarah

1.history.back()

Kaedah ini tidak mempunyai parameter Apabila dicetuskan, ia akan kembali ke halaman yang dilayari sebelum ini, yang bersamaan dengan mengklik butang belakang penyemak imbas.

2.history.forward()

Kaedah ini tidak mempunyai parameter Apabila dicetuskan, ia akan kembali ke halaman yang anda semak imbas sebelum kembali, yang bersamaan dengan mengklik butang hadapan penyemak imbas.

3.history.go(nombor)

Kaedah ini menerima parameter pembolehubah integer history.go(-1) bersamaan dengan kembali satu halaman, history.go(1) bersamaan dengan pergi satu halaman ke hadapan dan history.go(0) akan memuatkan semula halaman. halaman semasa.

4.history.pushState(negeri, tajuk, url)

Kunci untuk menukar URL tanpa memuat semula halaman ialah kaedah ini akan menukar lokasi.href halaman semasa dan mengubah suai objek history.state semasa Selepas pelaksanaan, history.length akan meningkat sebanyak 1. Kaedah ini menerima tiga parameter,

1.state: Objek yang berkaitan dengan URL semasa.
2.title: Tajuk halaman, tetapi semua pelayar mengabaikannya Untuk menukar tajuk, anda masih perlu menggunakan document.title.
3.url: URL dalam domain yang sama dengan halaman semasa, location.href akan menjadi nilai ini.

5.history.replaceState(negeri, tajuk, url)

Kaedah ini adalah sama seperti di atas, tetapi ia tidak akan mengubah history.length, tetapi hanya akan mengubah suai history.state dan location.href.

Perhatikan bahawa parameter ketiga pushState dan replaceState tidak boleh merentas domain dan tidak akan mencetuskan peristiwa popstate dan onhashchange penyemak imbas (diuji di bawah chrome33).

objek lokasi

Selain mengklik butang ke hadapan/belakang dan peristiwa sejarah, anda juga boleh menukar Url melalui kaedah lokasi dan mengubah suai sifat lokasi:

Atribut objek lokasi (baca dan tulis):

1.hos: nombor port nama domain
2.nama hos: nama domain
3.port: nombor port
4.protokol: protokol
5.href: laluan penuh
6.asal: port nama domain protokol
7.cincang: URL(cincang) bermula dengan tanda paun (#)
8.pathname: nama dokumen laluan dokumen
9.carian:Kandungan selepas (?)

Anda boleh mencapai tujuan tiada muat semula dengan menukar location.href atau location.hash.

Kaedah objek lokasi:

1.assign: Tukar nilai url dan menambah url semasa pada history.length sejarah akan meningkat sebanyak 1. location.asig(‘#’ x) akan menukar url tetapi tidak memuat semula halaman.
2.muat semula: Muat semula halaman.
3.replace: Tukar nilai url, tetapi history.length kekal tidak berubah. Kaedah penggunaan adalah sama seperti tugasan.

acara popstate

Apabila URL berubah, contohnya, pengguna mengklik butang hadapan/belakang, history.go(n) (n tidak sama dengan 0), location.hash = x (x tidak sama dengan lokasi semasa. hash) akan mencetuskan acara ini. Anda boleh menggunakannya untuk memantau URL untuk melaksanakan pelbagai fungsi.

Salin kod Kod adalah seperti berikut:

​ window.onpopstate = function(){
             //lakukan sth
}

onhashchange-Event

Das Ändern des Hash-Werts löst das Popstate-Ereignis aus, aber das Auslösen des Popstate-Ereignisses löst nicht unbedingt das Onhashchange-Ereignis aus. Getestet:

1.hash ändert sich, aber location.pathname bleibt unverändert und löst das onhashchange-Ereignis aus, z. B. „history.pushState(“, „“, ‚#abc‘);
2. Es wird nicht ausgelöst, wenn Hash und location.pathname zusammen geändert werden, z. B. „history.pushState(“, „“, „a#abc“);

So schreiben Sie in alten Browsern

Alte Browser unterstützen pushState und replaceState auch nicht, sodass die Überwachung von URL-Änderungen über popstate (tatsächlich wird diese Methode nicht unterstützt) nicht möglich ist. Dann können Sie keine Aktualisierung erreichen, indem Sie den Inhalt nach der URL-Nummer ändern. Onhashchange wird jedoch nicht unterstützt, sodass Änderungen in der URL gleichgültig sind (außer dass die Seite zu der Position scrollt, die der ID der Seite entspricht). Dann können Sie nur auf den großen Trick zurückgreifen: Durch Abfragen legen Sie ein setInterval fest, um den Wert der URL zu überwachen. So:

Code kopieren Der Code lautet wie folgt:

var prevHash = window.location.hash; var callback = function(){...}
window.setInterval(function() {
If (window.location.hash != prevHash) {
         prevHash = window.location.hash;         Rückruf (prevHash); }
}, 100);



Natürlich ist das Schreiben auf diese Weise sehr frustrierend. Wenn Sie nicht erwägen, auf ein Tag mit einer ID auf der Seite zu klicken, um den Hash zu ändern, können Sie Designmuster verwenden, um Überwachungs-URLs elegant zu implementieren. Im klassischen Beobachtermuster wird beispielsweise eine Klasse speziell zum Implementieren der Funktion zum Ändern des Hashs verwendet, und dann abonnieren alle Klassen (Beobachter), die URL-Änderungen überwachen möchten, diese (beobachtete) Klasse.

Code kopieren Der Code lautet wie folgt: //Ändern Sie die Klasse der URL

Funktion UrlChanger() {

var _this = this;
This.observers = [];
//Beobachter hinzufügen
This.addObserver = function(obj) {...}
//Beobachter löschen
This.deleteObserver = function(obj) {...}
//Beobachter benachrichtigen
This._notifyObservers = function() {
        var length = _this.observers.length;
console.log(Länge)
for(var i = 0; i ​​​​​​ _this.observers[i].update();
}
}
//URL ändern
This.changeUrl = function(hash) {
           window.location.hash = hash;
_this._notifyObservers();
}
}
//Hörkurs
Funktion oneOfObservers() {
var _this = this;
This.update = function() {...}
}
//Implementieren
var o1 = new UrlChanger();
var o2 = new oneOfObservers();
o1.addObserver(o2);
o1.changeUrl('fun/arg1/arg2/');
//o2 hat etw gemacht...