“Bu sayfadan uzaklaşmak istediğinizden emin misiniz?” Nasıl gösterilir? değişiklikler ne zaman yapıldı?

267

Burada stackoverflow'da, değişiklik yapmaya başlarsanız sayfadan uzaklaşmaya çalışırsınız, bir javascript onay düğmesi görünür ve sorar: "Bu sayfadan uzaklaşmak istediğinizden emin misiniz?" blee blah bloo ...

Bunu daha önce uygulayan var mı, değişikliklerin yapıldığını nasıl izleyebilirim? Bunu kendim yapabileceğime inanıyorum, sizden iyi uygulamaları uzmanlardan öğrenmeye çalışıyorum.

Aşağıdakileri denedim ama hala çalışmıyor:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

Herkes örnek gönderebilir mi?

javascript  html  message  onbeforeunload  confirm 
— Shimmy Weitzhandler
kaynak
3
Örneğin çalışmasını sağlamak için işlevi şu şekilde değiştirin: myFunction () {window.onbeforeunload = "message"; } ardından girişi değiştirin: <input type = 'text' onchange = 'myFunction ();'> </input>
— Keith
— AlikElzin-kilaka

Yanıtlar:

367

Güncelleme (2017)

Modern tarayıcılar artık özel bir mesaj görüntülemeyi bir güvenlik tehlikesi olarak görmektedir ve bu nedenle bunların tümü kaldırılmıştır . Tarayıcılar artık yalnızca genel mesajları gösteriyor. Artık mesajı ayarlamak konusunda endişelenmemiz gerekmediğinden, bu kadar basit:

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

Eski tarayıcı desteği için aşağıyı okuyun.

Güncelleme (2013)

Orjinal cevap IE6-8 ve FX1-3.5 için uygundur (yazıldığında 2009'da hedeflediğimiz şeydir), ancak şimdi oldukça güncel değil ve mevcut tarayıcıların çoğunda çalışmayacak - ayrıldım referans için aşağıda.

window.onbeforeunloadTüm tarayıcılar tarafından sürekli tedavi edilmez. Bir işlev başvurusu olmalı ve bir dize değil (orijinal yanıt belirtildiği gibi), ancak eski tarayıcılarda çalışacaktır, çünkü çoğunun kontrolü, herhangi bir şeyin atanıp atanmadığı onbeforeunload(geri dönen bir işlev dahil null) gibi görünmektedir .

window.onbeforeunloadBir işlev referansına ayarladınız , ancak eski tarayıcılarda returnValueyalnızca bir dize döndürmek yerine etkinliği ayarlamanız gerekir :

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

Bunu olamaz confirmOnPageExitkullanıcı mesajı olmadan devam etmek istiyorsanız onay ve dönüş null adlı yapmak. Etkinliği güvenilir bir şekilde açmak ve kapatmak için etkinliği kaldırmanız gerekir:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

Orijinal cevap (2009'da çalıştı)

Açmak için:

window.onbeforeunload = "Are you sure you want to leave?";

Kapatmak için:

window.onbeforeunload = null;

Bunun normal bir olay olmadığını aklınızda bulundurun - buna standart şekilde bağlanamazsınız.

Değerleri kontrol etmek için? Bu, doğrulama çerçevenize bağlıdır.

JQuery'de bu şöyle bir şey olabilir (çok temel bir örnek):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});
— Keith
kaynak
4
Bu şöyle olur: $ ('input: text'). Change (function () {window.onbeforeunload = $ ('input: text [value! = ""]'). Uzunluk> 0? "Uyarı": null ;});
— Keith
1
Basit bir kontrol için, ya da her değişiklik için daha karmaşık doğrulama ekleyebilirsiniz
— Keith
1
'returnValue' yönteminin standartta belirtilen tek yöntem olduğunu belirtmek gerekir, bu yüzden sadece IE6-8 için değil, tüm standartlara uyumlu tarayıcılar için (bu durumda Chrome, Safari ve Opera dahil değildir).
— rmcclellan
3
Form gönderimi ile ilgili uyarıyı durdurmak için kullandım $("#submit_button").click(function() { window.onbeforeunload = null; });. Başlangıçta düğmenin onclick olayını kullandım, ancak aynı zamanda hoş olmamasının yanı sıra IE8 ile de çalışmadı.
— Andy Beverley
1
@ AlikElzin-kilaka yapamazsın. Açılır metni değiştirmek istiyorsanız, kendi özel açılır pencerenizi oluşturmanız gerekir, ancak bu window.onbeforeunloadolayı engelleyemez .
— Keith
38

onbeforeunloadMicrosoft-izm standart bir çözüme var, ama tarayıcı desteği dengesiz olduğunu unutmayın yakın şeydir; Örneğin Opera için sadece sürüm 12 ve sonrasında çalışır (bu yazıdan itibaren hala beta sürümündedir).

Ayrıca, maksimum uyumluluk için Mozilla Geliştirici Ağı'nda açıklandığı gibi, bir dizeyi döndürmekten daha fazlasını yapmanız gerekir .

Örnek: Gezinme istemini etkinleştirmek / devre dışı bırakmak için aşağıdaki iki işlevi tanımlayın (bkz. MDN örneği):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

Sonra böyle bir form tanımlayın:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

Bu şekilde, kullanıcı yalnızca metin alanını değiştirdiğinde uzaklaşma konusunda uyarılır ve formu gerçekten gönderirken istenmez.

— Søren Løvborg
kaynak
1
Mozill'in sitesine bağlı olarak, en yeni masaüstü tarayıcıları artık onu destekliyor: developer.mozilla.org/en/DOM/window.onbeforeunload
— Hengjie
Microsoft-ism harika bir terimdir.
— Luke Taylor
18

JQuery ile bu işi yapmak oldukça kolaydır. Setlere bağlayabildiğiniz için.

Onbeforeunload yapmak için yeterli DEĞİLDİR, sadece birisi bir şeyler düzenlemeye başladığında uzak gezintiyi tetiklemek istiyorsunuz.

— Sam Safran
kaynak
2
@Jonstjohn 'in blog yazılarına çarpamıyor gibi görünüyor. Belki bir dost olur ve bizi doğru yöne yönlendirir? : D
— FLGMwt
14
=> 500 Dahili hata. Bu yüzden SO'da bağlantılar kullanımdan kaldırılmıştır. Düzeltilene kadar aşağı oylandı.
— Loïc
Bu web sitesi mevcut değil
— Mateusz
2
Bu bağlantı soruyu cevaplayabilse de, cevabın temel kısımlarını buraya eklemek ve bağlantıyı referans olarak sağlamak daha iyidir. Bağlantı verilen sayfa değişirse, yalnızca bağlantı yanıtları geçersiz olabilir.
— bwest
2
Jon St John orijinal bağlantı ı güncellemiş böylece kırılmış Wayback Makinası bunun sürümü. Bağlantının içeriği birçok başka sitede kopyalanmış olabilir, ancak sanırım Sam'in eklediğini "korumak" daha iyiydi
— Alvaro Montoro
14

jquerys 'beforeunload' benim için harika çalıştı

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});
— Devon Peticolas
kaynak
Bind kullanımdan kaldırıldı ve buna benzer daha yeni bir kod sürümü şu yanıtta görülebilir: stackoverflow.com/a/1889450/908677
— Elijah Lofgren
11

Bu, forma herhangi bir veri girildiyse iletiyi göstermenin ve form gönderilirse iletiyi göstermemenin kolay bir yoludur:

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})
— Carl G
kaynak
8

Keith'in zaten şaşırtıcı cevabını genişletmek için :

Özel uyarı mesajları

Özel uyarı mesajlarına izin vermek için, mesajı aşağıdaki gibi bir fonksiyona sarabilirsiniz:

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

Ardından bu işlevi özel mesajınızla arayın:

preventNavigation("Baby, please don't go!!!");

Gezinmeyi tekrar etkinleştirme

Yeniden etkinleştirmek navigasyon için yapmanız gereken tek şey ayarlanır window.onbeforeunloadiçin null. İşte, her yerde çağrılabilen düzgün küçük bir fonksiyona sarılmış:

function enableNavigation() {
    window.onbeforeunload = null;
}

Bunu form öğelerine bağlamak için jQuery kullanma

JQuery kullanıyorsanız, bu, aşağıdaki gibi bir formun tüm öğelerine kolayca bağlanabilir:

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

Ardından formun gönderilmesine izin vermek için:

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

Dinamik olarak değiştirilmiş formlar:

preventNavigation()ve enableNavigation()bir formu dinamik olarak değiştirmek veya AJAX isteği gönderen bir düğmeyi tıklamak gibi diğer işlevlere bağlanabilir. Bunu forma gizli bir girdi öğesi ekleyerek yaptım:

<input id="dummy_input" type="hidden" />

Sonra her zaman kullanıcının uzaklaşmasını önlemek istediğinizde preventNavigation(), çalıştırıldığından emin olmak için bu girişteki değişikliği tetiklerim :

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}
— mikrofon
kaynak
3

İşte bunu deneyin% 100 çalışıyor 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>
— Braydon
kaynak
3

Standart devletler iptal ederek kontrol edilebilir isteyen o beforeunload olayı veya bir dönüş değeri ayarı boş olmayan değeri . Ayrıca yazarların returnValue yerine Event.preventDefault () yöntemini kullanmaları gerektiğini ve kullanıcıya gösterilen iletinin özelleştirilemediğini belirtir. .

69.0.3497.92'den itibaren Chrome standardı karşılamıyor. Ancak dosyalanmış bir hata raporu var ve inceleme devam ediyor. Chrome, işleyici tarafından döndürülen değere değil, returnValue öğesinin olay nesnesine başvurularak ayarlanmasını gerektirir.

Değişiklik yapılıp yapılmadığını izlemek yazarın sorumluluğundadır; bir değişkenle veya olayın sadece gerektiğinde ele alınmasını sağlayarak yapılabilir.

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';
Snippet'i genişlet

— Trevor Karjanis
kaynak
2

Kullanıcı formda değişiklik yapmaya başladığında, bir boole bayrağı ayarlanır. Kullanıcı daha sonra sayfadan uzaklaşmaya çalışırsa, window.onunload olayında bu bayrağı kontrol edersiniz . Bayrak ayarlanmışsa, iletiyi bir dize olarak döndürerek gösterirsiniz. İletiyi dize olarak döndürmek, iletinizi içeren bir onay iletişim kutusu açar.

Değişiklikleri yürütmek için ajax kullanıyorsanız, değişiklikler falseyapıldıktan sonra bayrağı ayarlayabilirsiniz (örneğin, ajax başarı etkinliğinde).

— kirtan
kaynak
1

onchangeMetin alanına (veya diğer alanlara) JS'de bir değişken ayarlayan bir etkinlik ekleyebilirsiniz . Kullanıcı sayfayı kapatmaya çalıştığında (window.onunload) bu değişkenin değerini kontrol edip uyarıyı buna göre gösterirsiniz.

— Makram Saleh
kaynak
1
- Bunu yapamazsın alertve confirmsırasında engellenir window.onbeforeunloadve window.onunload(benim PC'de Chrome sürümünde en azından ama muhtemelen de her tarayıcıda Hiç bu işleyicileri desteklemek için).
— Mark Amery
1

Bu konudaki tüm cevaplara dayanarak, aşağıdaki kodu yazdım ve benim için çalıştı.

Yalnızca onunload olayının kontrol edilmesini gerektiren bazı girdi / textarea etiketleriniz varsa, HTML5 veri özniteliklerini şu şekilde atayabilirsiniz: data-onunload="true"

örneğin.

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

ve Javascript (jQuery) şöyle görünebilir:

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});
— Sagar Gala
kaynak
2
Ayrıca bkz "Bazı nedenlerden dolayı, Webkit tabanlı tarayıcılar iletişim kutusunda için spesifikasyonları uymayan" MDN en içinde beforeunload belgelerinde .
— Arjan
1

işte benim html 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

Ve böylece javaScript'te benzer bir şey yaptım

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}
— Justin Stone
kaynak
0

TextArea öğesinin onChange olayında bir ChangeFlag öğesi true değerine ayarlanarak kolayca yapılabilir . ChangeFlag değerine dayalı onay iletişim kutusunu göstermek için javascript kullanın . Formu atın ve onaylama doğru döndürürse istenen sayfaya gidin , başka bir şey yapmayın .

— simplyharsh
kaynak
-1

Gövde etiketi için javascript işlevlerini oradan çağırabileceğiniz bir "onunload" parametresi vardır. False değerini döndürürse uzaklaşmayı engeller.

— stribika
kaynak
13
Neyse ki, bu aslında işe yaramıyor. Aksi takdirde içeren bir sayfayı ziyaret etmekten nefret ederim <body onunload="return false;">.
— Søren Løvborg
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.