Bagaimanakah Saya Boleh Mengesan Klik Butang Belakang Penyemak Imbas dengan Amanah dan Menguatkuasakan Navigasi Dalam Halaman?

Teknik Penyemak Imbas Silang untuk Mengesan Klik Butang Belakang Penyemak Imbas dan Menguatkuasakan Navigasi Dalam Halaman

Mengesan klik butang belakang penyemak imbas dan menguatkuasakan penggunaan daripada sistem navigasi dalam halaman menggunakan sistem hashtag (#) boleh mencabar.

Pengesanan Butang Belakang Penyemak Imbas

Pendekatan konvensional menggunakan window.onhashchange sahaja tidak boleh dipercayai, kerana ia juga mencetuskan apabila elemen dalam halaman menukar cincang. Untuk menangani perkara ini, teknik baru menggunakan document.onmouseover, document.onmouseleave dan bendera boolean (window.innerDocClick) digunakan. Apabila tetikus pengguna memasuki kawasan dokumen, window.innerDocClick ditetapkan kepada benar dan apabila ia keluar, ia ditetapkan kepada palsu. Ini membenarkan pengendali tetingkap.onhashchange berikut:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

Penguatkuasaan Butang Belakang Dalam Halaman

Untuk mengawal navigasi belakang semata-mata melalui butang belakang dalam halaman, tatasusunan sejarah (window.location.lasthash) digunakan untuk menyimpan cincangan sebelumnya semasa pengguna maju melalui antara muka. Fungsi butang belakang dalam halaman (goBack) menggunakan tatasusunan ini untuk menavigasi ke halaman sebelumnya.

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    window.location.lasthash.pop();
}

Menekan Kunci Ruang Belakang

Untuk menghalang pengguna daripada menggunakan kekunci ruang belakang untuk mencetuskan butang belakang, coretan kod berikut boleh ditambah:

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Klik Butang Belakang Penyemak Imbas dengan Amanah dan Menguatkuasakan Navigasi Dalam Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!