Bagaimana untuk mengesan peristiwa butang belakang pelayar - pelayar silang

Question

Bagaimana untuk mengesan secara eksplisit jika pengguna menekan butang belakang dalam penyemak imbas?

Bagaimana cara saya menggunakan sistem #URL untuk memaksa penggunaan butang belakang dalam halaman dalam aplikasi web satu halaman?

Mengapa butang kembali penyemak imbas tidak mencetuskan acaranya sendiri? ?

Answer 1

Anda boleh mencuba popstate pengendali acara seperti:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

^{Nota: Untuk hasil terbaik, anda hanya perlu memuatkan kod ini pada halaman tertentu yang anda mahu melaksanakan logik untuk mengelakkan sebarang isu lain yang tidak dijangka.}

Acara popstate dinyalakan setiap kali entri sejarah semasa berubah (pengguna menavigasi ke keadaan baharu). Ini berlaku apabila pengguna mengklik butang belakang/maju penyemak imbas atau apabila kaedah history.back()、history.forward()、history.go() > dipanggil secara pengaturcaraan.

event.state ialah atribut peristiwa, sama dengan objek keadaan sejarah.

Untuk sintaks jQuery, bungkusnya (tambah pendengar yang sekata selepas dokumen siap):

(function($) {
  // Above code here.
})(jQuery);

Lihat juga: window.onpopstate pada pemuatan halaman

---

Lihat juga halaman contoh pada Aplikasi Halaman Tunggal dan HTML5 PushState:

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Ini sepatutnya serasi dengan Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ dan versi yang serupa.

Answer 2

(Nota: Saya menambah kod untuk mengesan ruang belakang berdasarkan maklum balas daripada Sharky)

Jadi, saya sering melihat soalan ini tentang SO, dan baru-baru ini saya menghadapi masalah mengawal fungsi butang belakang sendiri. Selepas berhari-hari mencari penyelesaian terbaik untuk aplikasi saya (halaman tunggal dengan navigasi dicincang), saya menghasilkan sistem tanpa pustaka yang ringkas, silang pelayar, bebas perpustakaan untuk mengesan butang belakang.

Kebanyakan orang mengesyorkan menggunakan:

window.onhashchange = function() {
 //blah blah blah
}

Walau bagaimanapun, fungsi ini juga dipanggil apabila pengguna menggunakan elemen dalam halaman yang mengubah cincang kedudukan. Ini bukan pengalaman pengguna terbaik apabila pengguna mengklik dan halaman bergerak ke belakang atau ke hadapan.

Untuk memberi anda garis besar umum sistem saya, semasa pengguna bergerak melalui antara muka, saya akan mengisi tatasusunan dengan nilai cincang sebelumnya. Ia kelihatan seperti ini:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Sangat mudah. Saya melakukan ini untuk memastikan sokongan silang pelayar serta sokongan untuk pelayar lama. Hanya hantar nilai cincang baharu kepada fungsi dan ia akan menyimpannya untuk anda, kemudian tukar nilai cincang (dan kemudian masukkannya dalam sejarah penyemak imbas).

Saya juga mengambil kesempatan daripada butang belakang dalam halaman yang menggunakan tatasusunan lasthash untuk mengalihkan pengguna antara halaman. Ia kelihatan seperti ini:

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

Jadi ini mengalihkan pengguna kembali ke cincang terakhir dan mengalih keluar cincangan terakhir daripada tatasusunan (saya tidak mempunyai butang ke hadapan sekarang).

Jadi. Bagaimanakah saya dapat mengesan jika pengguna menggunakan butang belakang dalam halaman atau butang penyemak imbas saya?

Pada mulanya saya melihat window.onbeforeunload tetapi tidak berjaya - ia hanya dipanggil apabila pengguna ingin menukar halaman. Ini tidak berlaku dalam aplikasi satu halaman menggunakan navigasi cincang.

Jadi, selepas beberapa kali menggali, saya melihat cadangan untuk mencuba menetapkan pembolehubah bendera. Dalam kes saya, masalahnya ialah saya akan cuba menetapkannya, tetapi memandangkan semuanya tidak segerak, ia tidak akan sentiasa ditetapkan dalam masa untuk pernyataan if dalam perubahan cincang. .onMouseDown tidak selalu dipanggil dalam klik , dan menambahkannya pada onclick tidak akan mencetuskannya dengan cukup cepat.

Sejak itu saya mula menyelidik 文档和窗口之间的区别。我的最终解决方案是使用 document.onmouseover 设置该标志，并使用 document.onmouseleave melumpuhkannya.

Apa yang berlaku ialah apabila tetikus pengguna berada dalam kawasan dokumen (baca: halaman yang diberikan, tetapi bukan bingkai penyemak imbas), boolean saya ditetapkan kepada true。一旦鼠标离开文档区域，布尔值就会翻转为 false.

Dengan cara ini, saya boleh menukar window.onhashchange kepada:

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

Anda akan melihat semakan untuk #undefined. Ini kerana jika tiada sejarah tersedia dalam tatasusunan saya ia mengembalikan undefined. Saya menggunakan ini untuk bertanya kepada pengguna jika mereka mahu keluar menggunakan acara #undefined 的检查。这是因为如果我的数组中没有可用的历史记录，它将返回 undefined。我用它来询问用户是否想使用 window.onbeforeunload.

Jadi, secara ringkasnya, bagi sesiapa yang tidak semestinya menggunakan butang belakang dalam halaman atau tatasusunan untuk menyimpan sejarah:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

Ini yang anda mahukan. Pendekatan tiga bahagian mudah untuk mengesan penggunaan butang belakang berbanding elemen dalam halaman dari segi navigasi cincang.

Editor:

Untuk memastikan pengguna tidak menggunakan kekunci ruang belakang untuk mencetuskan acara belakang, anda juga boleh memasukkan perkara berikut (terima kasih kepada soalan ini):

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