js klik kembali untuk melompat ke kemahiran proses_javascript pelaksanaan halaman yang ditentukan-tutorial js-php.cn

Fungsi ini telah diperkenalkan secara ringkas sebelum ini. Kali ini saya akan menerangkan secara terperinci prinsip dan masalah sedia ada (kerana ia menggunakan API baru html5, terdapat masalah keserasian. Adalah disyorkan untuk menggunakan kaedah ini pada terminal mudah alih).

Penerangan fungsi:

Buat tab baharu dalam penyemak imbas dan nyatakan URL Selepas halaman web dimuatkan, klik semula tidak dibenarkan di bawah prosedur biasa. Oleh kerana tiada rekod sejarah yang berkaitan untuk halaman tab semasa, tiada rekod untuk dikembalikan.

Atas permintaan pelanggan, dalam kes ini, pautan (seperti halaman utama) perlu ditambahkan pada rekod sejarahnya, supaya pada halaman yang baru dibuka, mengklik kembali boleh melompat ke halaman utama, membenarkan pengguna untuk melihat pelbagai fungsi sistem, platform promosi.

1. Perkara utama pengetahuan

HTML5 memperkenalkan kaedah history.pushState() dan kaedah history.replaceState(), yang membolehkan anda menambah dan mengubah suai entri sejarah satu demi satu. Kaedah ini berfungsi bersama dengan peristiwa window.onpopstate.

Kes:
Anggap http://mozilla.org/foo.html akan melaksanakan kod JavaScript berikut:

Salin kod Kod adalah seperti berikut:

var stateObj = { foo: "bar" }; .pushState( stateObj, "halaman 2", "bar.html");

Ini akan menyebabkan bar alamat penyemak imbas dipaparkan http://mozilla.org/bar.html, tetapi tidak akan memuatkan halaman bar.html atau bar semak wujud.

Andaikan pengguna kini menavigasi ke http://google.com, dan kemudian mengklik butang belakang Pada masa ini, bar alamat akan memaparkan http: //mozilla.org/bar.html, dan halaman akan mencetuskan peristiwa popstate Objek keadaan dalam acara ini mengandungi salinan stateObj. Halaman kelihatan seperti foo.html, walaupun kandungan halaman mungkin telah diubah suai dalam acara popstate.

Jika kita mengklik butang kembali sekali lagi, URL akan bertukar kembali kepada http://mozilla.org/foo.html Dokumen akan mencetuskan satu lagi peristiwa popstate, kali ini kerana objek keadaan adalah batal. Berbalik juga tidak mengubah kandungan dokumen.

kaedah pushState()
pushState() mengambil tiga parameter: objek keadaan, tajuk (kini diabaikan) dan URL pilihan. Mari kita periksa butiran tiga parameter ini secara individu:

objek nyatakan — Objek JavaScript yang dikaitkan dengan entri sejarah baharu yang dibuat dengan kaedah pushState(). Setiap kali pengguna menavigasi ke keadaan yang baru dibuat, peristiwa popstate dicetuskan dan sifat keadaan objek acara mengandungi salinan objek keadaan entri sejarah.

Sebarang objek boleh bersiri boleh digunakan sebagai objek keadaan. Oleh kerana penyemak imbas FireFox menyimpan objek keadaan ke pemacu keras pengguna supaya ia boleh dipulihkan selepas pengguna memulakan semula penyemak imbas, kami mengenakan had pada saiz objek keadaan kepada 640k. Jika anda melepasi objek keadaan yang melebihi had ini kepada kaedah pushState(), kaedah tersebut akan membuang pengecualian. Jika anda perlu menyimpan sejumlah besar data, disyorkan untuk menggunakan sessionStorage atau localStorage.

tajuk — FireFox pada masa ini mengabaikan parameter ini, walaupun ia mungkin digunakan pada masa hadapan. Memandangkan kaedah ini boleh diubah suai pada masa hadapan, adalah lebih selamat untuk menghantar rentetan kosong. Sebagai alternatif, anda boleh lulus dalam tajuk pendek yang menunjukkan negeri yang akan anda masuki.

Alamat (URL) — Alamat entri sejarah baharu. Penyemak imbas tidak akan memuatkan alamat selepas memanggil kaedah pushState(), tetapi mungkin cuba memuatkannya kemudian, seperti apabila pengguna memulakan semula penyemak imbas. URL baharu tidak perlu menjadi laluan mutlak; jika ia adalah laluan relatif, ia akan berdasarkan URL semasa dan URL semasa harus mempunyai asal yang sama, jika tidak, pushState() akan membuang pengecualian . Parameter ini adalah pilihan jika tidak dinyatakan, ia akan menjadi URL semasa dokumen.

Nota: Dalam Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) kepada Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), objek yang masuk disiri menggunakan JSON. Bermula dengan Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), objek disiri menggunakan algoritma salinan berstruktur. Ini akan membolehkan lebih banyak jenis objek dilalui dengan selamat.
Dari satu segi, memanggil pushState() adalah serupa dengan menetapkan window.location='#foo' kerana ia mencipta dan mengaktifkan entri sejarah baharu dalam dokumen semasa. Tetapi pushState() mempunyai kelebihannya sendiri:

1. URL baharu boleh menjadi URL asal yang sama Sebaliknya, apabila menggunakan kaedah window.location, hanya mengubah suai cincang boleh memastikan ia kekal dalam dokumen yang sama.

2. Tentukan sama ada untuk mengubah suai URL mengikut keperluan peribadi. Sebaliknya, menetapkan window.location='#foo' mencipta rekod sejarah baharu hanya jika nilai cincang semasa bukan foo.

3. Anda boleh menambah data abstrak pada entri sejarah baharu. Jika anda menggunakan kaedah berasaskan cincang, anda hanya boleh menukar kod data yang berkaitan ke dalam rentetan yang sangat pendek.

Perhatikan bahawa kaedah pushState() tidak akan mencetuskan peristiwa pertukaran cincang, walaupun jika alamat baharu hanya menukar cincang.

acara popstate
Setiap kali sejarah yang diaktifkan berubah, acara popstate dimatikan. Jika entri sejarah yang diaktifkan telah dibuat oleh pushState, atau dipengaruhi oleh kaedah replaceState, sifat keadaan peristiwa popstate akan mengandungi salinan objek keadaan sejarah.

kaedah replaceState()
Operasi history.replaceState() adalah serupa dengan history.pushState(), kecuali kaedah replaceState() mengubah suai entri sejarah semasa dan bukannya membuat entri baharu.

Menggunakan kaedah replaceState() amat sesuai apabila anda ingin mengemas kini objek keadaan atau URL entri sejarah semasa sebagai tindak balas kepada beberapa operasi pengguna.

2. Idea pelaksanaan
1. Gunakan acara popstate untuk memantau acara klik kembali.

2. Apabila acara dicetuskan, tentukan sama ada terdapat halaman dalam sejarah halaman semasa yang boleh dikembalikan.

3. Jika tiada halaman untuk dikembalikan, masukkan dua rekod:

1), halaman lompat yang ditetapkan.

2), rekod kosong. (Kekalkan halaman semasa tidak berubah)

3. Kaedah pelaksanaan

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

Salin selepas log masuk

Tentukan bilangan rekod dalam sejarah semasa, kerana apabila halaman dimuatkan, penyemak imbas akan menolak rekod secara automatik. Jadi kita perlu menilai sama ada panjangnya kurang daripada 2.

Objek keadaan yang dimasukkan adalah untuk mendapatkan pautan url yang sepadan.
Nota:
Dalam pushState pertama, saya meletakkan url lompat ke dalam objek keadaan untuk memudahkan operasi lompat. Parameter kedua tidak mempunyai makna praktikal kerana pelayar semasa pada dasarnya tidak menyokong parameter ini.
Parameter ketiga akan menggantikan pautan dalam bar alamat semasa, tetapi halaman tidak akan melompat. (Saya membuat kesilapan sebelum ini, menetapkan parameter ketiga kepada pautan halaman utama, yang menyebabkan bar alamat ditukar kepada pautan halaman utama, supaya pautan pada halaman semasa melompat berdasarkan halaman utama, menyebabkan semua pautan pada halaman menjadi melompat. Salah pemindahan )

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

Salin selepas log masuk

Kod ini diletakkan dan dilaksanakan dalam acara sedia halaman. Kelewatan 300 milisaat adalah untuk menangguhkan operasi dan mengelakkan konflik dengan acara pop sistem.
Pernyataan if adalah untuk menentukan sama ada terdapat objek keadaan dalam sejarah, kerana hanya rekod yang memenuhi keperluan kami akan mempunyai objek keadaan yang kami tambah, jadi berdasarkan perkara ini, operasi lompat halaman boleh dilakukan.
Ini akan mencapai kesan yang kita inginkan.
4. Tulis di hujung
Kelemahan:
1. Jelas sekali, seperti yang dinyatakan di awal. Hanya sesuai untuk pelayar yang menyokong HTML5.
2. Memandangkan dua rekod dimasukkan, sama seperti pulangan pada terminal mudah alih seperti WeChat, anda perlu mengklik kembali dua kali lagi untuk melancarkan halaman dan kembali ke tetingkap sembang WeChat, yang merupakan pengalaman pengguna yang buruk.

Ringkasan:
Kaedah ini sudah tentu boleh dioptimumkan dan disempurnakan, tetapi pada masa ini kekuatan saya tidak mencukupi untuk menyempurnakannya.

Saya harap rakan-rakan yang membaca artikel ini mendapat sedikit inspirasi atau mencari jalan yang lebih baik untuk mencapainya.