Bagaimana Mengesan Klik Butang Belakang dengan Tepat dalam Penyemak Imbas?

Mengesan Klik Butang Belakang dalam Penyemak Imbas dengan Ketepatan Dipertingkat

Pengenalan:

Mengenal pasti klik butang belakang adalah penting untuk melaksanakan penyemak imbas penjejakan sejarah navigasi. Walaupun pelbagai pendekatan wujud, adalah penting untuk membezakan antara klik butang belakang tulen dan tindakan penyemak imbas lain yang mencetuskan peristiwa serupa.

Latar Belakang:

Satu pendekatan biasa melibatkan penggunaan tetingkap pendengar acara .onbeforeunload, yang menyala apabila pengguna cuba menutup atau menavigasi keluar dari halaman. Walau bagaimanapun, peristiwa ini juga mencetuskan tindakan seperti menekan F5 atau memuat semula halaman, yang membawa kepada positif palsu.

Penyelesaian:

Untuk menangani isu ini, cara yang lebih canggih penyelesaian diperlukan. Penyelesaian ini memanfaatkan kaedah history.pushState dan window.onpopstate, yang memberikan kawalan yang lebih baik ke atas sejarah navigasi.

Pelaksanaan:

Coretan kod berikut menunjukkan pelaksanaan:

<code class="js">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

Penjelasan:

Kod ini menggunakan history.pushState untuk mengemas kini sejarah penyemak imbas tanpa memuatkan semula halaman. Ia kemudiannya terikat pada peristiwa window.onpopstate, yang tercetus apabila pengguna mengklik butang belakang atau hadapan.

Dalam penyemak imbas yang menyokong history.pushState, pendekatan ini menyediakan pengesanan tepat klik butang belakang, tidak termasuk acara muat semula. Untuk penyemak imbas yang lebih lama, kod menggunakan kaedah sandaran berdasarkan perubahan cincang, yang memperkenalkan sedikit pengehadan dalam mengendalikan pembatas tanda paun.

Kesimpulan:

Pendekatan yang dipertingkatkan ini memastikan pengesanan tepat klik butang belakang dalam pelayar, menghapuskan had penggunaan window.onbeforeunload sahaja. Ia menyediakan pembangun penyelesaian yang boleh dipercayai untuk menjejak sejarah navigasi dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana Mengesan Klik Butang Belakang dengan Tepat dalam Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!