Bagaimana untuk Melaksanakan 'Tinggalkan Halaman?' Pengesahan untuk Perubahan Tidak Disimpan?

Bagaimana untuk Melaksanakan "Adakah anda pasti mahu menavigasi keluar dari halaman ini?" Pengesahan Apabila Perubahan Tidak Disimpan Wujud

Apabila menyemak imbas halaman web, pengguna mungkin menghadapi gesaan pengesahan yang muncul sebelum menavigasi keluar dari halaman yang perubahan belum disimpan telah dibuat. Pengesahan ini berfungsi untuk memaklumkan pengguna bahawa perubahan mereka yang belum disimpan akan hilang jika mereka meneruskan. Artikel ini meneroka cara melaksanakan fungsi ini, menangani cabaran khusus yang dihadapi dalam penyemak imbas dengan keupayaan berbeza.

Satu kaedah melibatkan memanfaatkan peristiwa window.onbeforeunload. Dari segi sejarah, acara ini boleh diberikan nilai rentetan untuk memaparkan mesej pengesahan tersuai, tetapi penyemak imbas moden menganggap ini sebagai bahaya keselamatan dan kini hanya memaparkan mesej generik. Hasilnya, pelaksanaan telah dipermudahkan kepada perkara berikut:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};

// Remove navigation prompt
window.onbeforeunload = null;

Untuk sokongan pelayar lama, pendekatan yang lebih komprehensif diperlukan. Acara window.onbeforeunload mesti diberikan rujukan fungsi dan dalam penyemak imbas lama, sifat returnValue acara mesti ditetapkan:

var confirmOnPageExit = function (e) {
    // Get the event object
    e = e || window.event;

    // Set the return value to display the message
    if (e) {
        e.returnValue = 'Confirm exit? Unsaved changes will be lost.';
    }

    // Return the message for newer browsers
    return 'Confirm exit? Unsaved changes will be lost.';
};

Untuk menogol gesaan pengesahan, hanya tetapkan fungsi confirmOnPageExit ke tetingkap. onbeforeunload untuk mendayakannya dan mengalih keluar fungsi untuk melumpuhkannya:

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

Untuk menjejaki perubahan yang tidak disimpan, adalah perlu untuk bergantung pada rangka kerja pengesahan khusus yang digunakan. Contohnya, dalam jQuery, coretan kod berikut menunjukkan cara memantau perubahan pada medan input dan mencetuskan gesaan pengesahan:

$('input').change(function() {
    if( $(this).val() != "" ) {
        window.onbeforeunload = confirmOnPageExit;
    }
});

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan 'Tinggalkan Halaman?' Pengesahan untuk Perubahan Tidak Disimpan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!