Penyelesaian kepada butang kembali JavaScript tidak berfungsi

Dalam pembangunan web harian, kami sering menghadapi situasi di mana kami perlu melumpuhkan butang belakang halaman. Ini menghalang pengguna daripada menggunakan fungsi belakang penyemak imbas pada halaman web, sekali gus melindungi keselamatan dan kestabilan halaman web. Apabila menggunakan JavaScript untuk melaksanakan fungsi ini, kita mungkin menghadapi situasi di mana butang belakang tidak tersedia. Seterusnya, kami akan menerangkan cara menyelesaikan masalah ini.

1. Punca masalah

Melumpuhkan butang belakang penyemak imbas dalam JavaScript biasanya dicapai dengan mengendalikan sejarah penyemak imbas. Butang belakang akan dilumpuhkan apabila melaksanakan dua kaedah berikut:

history.forward()
history.back()

Walau bagaimanapun, dalam beberapa kes, kaedah ini tidak dapat melumpuhkan butang belakang. Biasanya situasi ini berlaku dalam dua situasi berikut:

1. Halaman semasa ialah borang yang diserahkan melalui kaedah HTTP POST dan borang tersebut mengandungi sejumlah besar data.
2. Dalam persekitaran berjalan halaman web, kod dilaksanakan dengan pantas sehinggakan apabila kaedah history.forward() atau history.back() dilaksanakan, penyemak imbas tidak bertindak balas terhadap operasi ini tepat pada masanya.

2. Penyelesaian

Untuk dua situasi di atas, kita boleh menggunakan penyelesaian berikut.

1. Realisasikan fungsi belakang dengan mengubah suai URL

Kita boleh melaksanakan fungsi belakang dengan menambahkan pengecam khusus pada URL halaman. Apabila pengguna mengklik butang kembali, kami hanya perlu mendengar peristiwa popstate objek tetingkap dan menentukan sama ada URL mengandungi pengecam ini untuk menentukan sama ada pengguna perlu kembali. Kodnya adalah seperti berikut:

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.isBack) {
        // 执行后退操作
    }
});

var state = {
    isBack: true
};

history.pushState(state, '', '#back');

Dalam kod di atas, kami mula-mula mendengar peristiwa popstate objek tetingkap Apabila peristiwa dicetuskan, kami menentukan sama ada objek event.state mengandungi medan isBack . Jika ia berlaku, Kemudian lakukan operasi ke belakang. Apabila kita perlu melumpuhkan butang kembali, kita hanya perlu memanggil kaedah history.pushState() dan menambah objek keadaan dengan pengecam di mana ia perlu dilumpuhkan.

2. Sedar kembali dengan mengubah suai kaedah onbeforeunload objek tetingkap

Kami juga boleh melumpuhkan butang belakang dengan mengatasi kaedah onbeforeunload objek tetingkap. Apabila pengguna mengklik butang belakang, kerana kaedah onbeforeunload ditindih, penyemak imbas akan muncul kotak pengesahan Pada masa ini, pengguna hanya boleh kekal di halaman semasa dengan memilih "Kekal di halaman ini" dalam kotak pengesahan. Kodnya adalah seperti berikut:

window.onbeforeunload = function() {
    return "是否离开当前页面？";
}

Dalam kod di atas, kami mengatasi kaedah onbeforeunload objek tetingkap dan mengembalikan kotak pengesahan. Apabila pengguna mengklik butang kembali, pelayar akan muncul kotak pengesahan Memandangkan pengguna boleh kekal di halaman semasa hanya dengan memilih "Kekal di halaman ini", butang kembali akan menjadi tidak sah.

Ringkasan:

Lumpuhkan butang belakang penyemak imbas dan dalam beberapa kes anda mungkin menghadapi masalah bahawa butang belakang tidak tersedia. Kami boleh menyelesaikan masalah ini dengan mengubah suai URL atau mengatasi kaedah onbeforeunload. Apabila kita perlu melumpuhkan butang kembali, kita hanya perlu memanggil kaedah yang sepadan di mana ia perlu dilumpuhkan.

Atas ialah kandungan terperinci Penyelesaian kepada butang kembali JavaScript tidak berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!