Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mencegah Navigasi Tidak Sengaja dari Halaman dengan Perubahan Tidak Disimpan?

Bagaimana untuk Mencegah Navigasi Tidak Sengaja dari Halaman dengan Perubahan Tidak Disimpan?

Susan Sarandon
Susan Sarandonasal
2024-12-12 14:20:10914semak imbas

How to Prevent Accidental Navigation Away from a Page with Unsaved Changes?

Cara Memaparkan "Adakah anda pasti mahu menavigasi keluar dari halaman ini?" Apabila Perubahan Dilakukan

Dalam persekitaran web moden, memaparkan gesaan navigasi tersuai dianggap sebagai kebimbangan keselamatan dan penyemak imbas tidak lagi menyokong fungsi ini. Sebaliknya, penyemak imbas hanya akan memaparkan mesej generik. Untuk mendayakan atau melumpuhkan gesaan navigasi, hanya gunakan kod berikut:

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

// Remove navigation prompt
window.onbeforeunload = null;

Sokongan Penyemak Imbas Lama (Ditamatkan)

Untuk keserasian dengan penyemak imbas lama seperti sebagai IE6-8 dan Firefox 1-3.5, anda boleh menggunakan kod berikut untuk memaparkan navigasi tersuai prompt:

var confirmOnPageExit = function (e) {
    // Define the message to be displayed
    var message = 'Confirm your navigation away from the page';

    // Handle compatibility with older browsers
    if (e) {
        e.returnValue = message;
    }

    // Return the message
    return message;
};

// Enable the navigation prompt
window.onbeforeunload = confirmOnPageExit;

// Disable the navigation prompt
window.onbeforeunload = null;

Untuk menyemak nilai yang diubah apabila menggunakan rangka kerja pengesahan seperti jQuery, anda boleh menggunakan kod yang serupa dengan yang berikut:

$('input').change(function() {
    // Check if the input value is not empty
    if( $(this).val() != "" ) {
        // Enable the navigation prompt
        window.onbeforeunload = confirmOnPageExit;
    }
});

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Navigasi Tidak Sengaja dari Halaman dengan Perubahan Tidak Disimpan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn