JavaScript trước khi rời khỏi trang

233

Tôi muốn xác nhận trước khi người dùng rời khỏi trang. Nếu anh ta nói ok thì nó sẽ chuyển hướng đến trang mới hoặc hủy bỏ để rời đi. Tôi đã cố gắng để làm cho nó với onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Nhưng nó xác nhận sau khi trang đã đóng? Làm thế nào để làm điều đó đúng?

Sẽ tốt hơn nữa nếu ai đó chỉ ra cách làm điều đó với jQuery?

javascript jquery

— kd7
nguồn

1

ha ha ha ... Vâng, điều đó hoàn toàn đúng..nhưng may mắn đó không phải là trang web của tôi ... khách hàng của tôi yêu cầu làm điều đó về phía anh ấy

— kd7

25

Ya, nhưng tôi thực sự rất vui khi thấy những cảnh báo đó khi tôi sắp thoát khỏi một trang Gmail chưa được lưu.

— Etdashou

Lưu ý, trên Firefox 4+ chỉ có một thông báo mặc định được hiển thị thay vì nhà phát triển

— bạn.mozilla.org/en

4

Bản sao có thể có của người dùng Warn trước khi rời khỏi trang web với các thay đổi chưa được lưu

— Wasim A.

352

onunload(hoặc onbeforeunload) không thể chuyển hướng người dùng đến một trang khác. Điều này là vì lý do bảo mật.

Nếu bạn muốn hiển thị lời nhắc trước khi người dùng rời khỏi trang, hãy sử dụng onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Hoặc với jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Điều này sẽ chỉ hỏi người dùng nếu họ muốn rời khỏi trang hay không, bạn không thể chuyển hướng họ nếu họ chọn ở lại trang. Nếu họ chọn rời đi, trình duyệt sẽ đi đến nơi họ bảo nó đi.

Bạn có thể sử dụng onunloadđể thực hiện công cụ trước khi tải trang, nhưng bạn không thể chuyển hướng từ đó (Chrome 14+ chặn cảnh báo bên trong onunload):

window.onunload = function() {
    alert('Bye.');
}

Hoặc với jQuery:

$(window).unload(function(){
  alert('Bye.');
});

— Tên lửa Hazmat
nguồn

12

@Joseph: Khi bạn trả về một chuỗi từ onbeforeunload, trình duyệt sẽ đặt chuỗi đó vào hộp xác nhận của chính nó. Sử dụng confirmlà vô ích trong onunloadvà onbeforeunload, bởi vì chỉ có trình duyệt có thể kiểm soát nơi nó đi, không phải bạn. Xem bản demo này: jsfiddle.net/3kvAC

— Rocket Hazmat

7

Chỉ cần một lưu ý, nếu bạn muốn hiển thị một cách có điều kiện một thông báo onbeforeunload, return falsesẽ làm cho trình duyệt hiển thị "sai" trong hộp thoại. Bạn cần phải return undefinednếu bạn muốn để cửa sổ đóng mà không có cảnh báo người dùng.

— Dan Fitch

5

@Adam: Firefox quyết định không cho phép tùy chỉnh tin nhắn đó. Đó là một phần của trình duyệt, vì vậy bạn không thể ghi đè hành vi đó. Các trình duyệt khác cũng có thể loại bỏ khả năng tùy chỉnh tin nhắn. Xem: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/

— Kẻ

8

@RocketHazmat Chrome cũng vậy. Bây giờ nó chỉ nói: Bạn có muốn rời khỏi trang web này không? Những thay đổi bạn thực hiện có thể không được lưu.

— lập trình

6

@ lập trình5000 Thật tốt vì một số trang web độc hại có thể hiển thị một số cảnh báo vô ích (ví dụ: "Bạn không thể rời đi mà không cung cấp thông tin ngân hàng của mình")

— Naman

34

Mã này khi bạn cũng phát hiện trạng thái biểu mẫu có thay đổi hay không.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Bạn có thể hàm Google JQuery Form serialize, điều này sẽ thu thập tất cả các đầu vào của biểu mẫu và lưu nó thành mảng. Tôi đoán điều này giải thích là đủ :)

— Wasim A.
nguồn

Bất cứ ý tưởng tại sao điều này sẽ không làm việc? Nó có thể bị ghi đè bởi các hàm js / plugin jquery khác không? Tôi đang chạy một ứng dụng webrtc và tôi muốn "đóng" một số nội dung khi máy khách đóng cửa sổ do đó cần phải xử lý đóng cửa sổ.

— hey

1

điều này có thể bị ghi đè bởi bất kỳ plugin nào khác, v.v., chủ yếu là do nhà phát triển mắc lỗi với bộ chọn, nếu bạn nghi ngờ về việc ghi đè, hãy đặt mã jquery của bạn trước khi đóng thẻ </ body>.

— Wasim A.

Có ... nếu bạn có một số mã JS ẩn hoặc vô hiệu hóa các trường đầu vào sau khi trang được tải thì khi bạn thực hiện kiểm tra để so sánh các trường \ bị vô hiệu hóa sẽ không được nối tiếp. Việc kiểm tra sẽ thất bại tất nhiên. ;) Có cách giải quyết này: stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

Nhân tiện ... có một cách tốt hơn ở đây: stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

cần lưu ý rằng điều này cũng sẽ đưa ra cảnh báo khi nhấn nút gửi. người ta có thể tuần tự hóa biểu mẫu một lần nữa khi nhấp vào nút gửi để ngăn chặn điều đó.

— Adam

19

Điều này sẽ cảnh báo khi rời khỏi trang hiện tại

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

— Ajit Singh
nguồn

14

Đây là những gì tôi đã làm để hiển thị thông báo xác nhận ngay khi tôi có dữ liệu chưa được lưu

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

trả về "không xác định" sẽ vô hiệu hóa xác nhận

Lưu ý: trả về "null" sẽ không hoạt động với IE

Ngoài ra, bạn có thể sử dụng "không xác định" để tắt xác nhận

window.onbeforeunload = undefined;

— Mina Matta
nguồn

11

Để có popop với Chrome 14+, bạn cần làm như sau:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Người dùng sẽ được hỏi nếu anh ta muốn ở lại hay rời đi.

— David Bélanger
nguồn

Bất cứ ý tưởng tại sao điều này không làm việc? Tôi đang sử dụng chrome (phiên bản mới nhất) cùng với một loạt các plugin jquery nhưng tôi không nhận được bất kỳ cảnh báo nào khi đóng cửa sổ.

— hey

@hey Tại sao bỏ phiếu xuống? Nó hoạt động .... Bạn cần chắc chắn rằng nó nằm ngoài jQuery(document)và tôi khuyên bạn nên đặt nó ngay sau khi tất cả các plugin của bạn được tải. Ngoài ra, đoạn trích này không thực hiện bất kỳ cảnh báo nào ... nó chỉ là bản demo với return.

— David Bélanger

7

Bạn có thể sử dụng một lớp lót sau để luôn hỏi người dùng trước khi rời trang.

window.onbeforeunload = s => "";

Để hỏi người dùng khi một cái gì đó trên trang đã được sửa đổi, hãy xem câu trả lời này .

— spencer.sm
nguồn

Điều này cũng kích hoạt nếu tôi làm mới trang hoặc chỉ thoát?

— Si8

Vâng, nó sẽ bắn vào một làm mới hoặc thoát.

— spencer.sm

Có cách nào để biết khi nào nó được làm mới so với lần đầu tiên không?

— Si8

Khi người dùng đến trang lần đầu tiên trái ngược với người dùng làm mới trang.

— Si8

Ôi không. Nó sẽ không bị sa thải khi người dùng đến trang lần đầu tiên. Chỉ khi đóng hoặc thay đổi trang hoặc làm mới.

— spencer.sm

4

Thông thường bạn muốn hiển thị thông báo này, khi người dùng đã thực hiện thay đổi trong một biểu mẫu, nhưng chúng không được lưu.

Thực hiện phương pháp này để hiển thị một thông báo, chỉ khi người dùng đã thay đổi một cái gì đó

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Simon Franzen
nguồn

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onb Beforeunload.asp

— Tiểu vương quốc Mamashov
nguồn

1

Chỉ cần hữu ích hơn một chút, bật và tắt

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
nguồn

1

Hầu hết các giải pháp ở đây không hiệu quả với tôi nên tôi đã sử dụng giải pháp được tìm thấy ở đây

Tôi cũng đã thêm một biến để cho phép hộp xác nhận hay không

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Raj Sharma
nguồn