كيفية إظهار "هل أنت متأكد من أنك تريد التنقل بعيدا عن هذه الصفحة؟" عند التغييرات الملتزمة؟

StackOverflow https://stackoverflow.com/questions/1119289

سؤال

هنا في Stackoverflow، إذا بدأت في إجراء تغييرات ثم تحاول التنقل بعيدا عن الصفحة، فإن زر تأكيد JavaScript يظهر ويسأل: "هل أنت متأكد من أنك تريد التنقل بعيدا عن هذه الصفحة؟" بلو بلاه بلو ...

وقد نفذ أي شخص هذا من قبل، كيف أتعقب هذه التغييرات ارتكبت؟ أعتقد أنني أستطيع القيام بذلك بنفسي، أحاول تعلم الممارسات الجيدة منك الخبراء.

جربت ما يلي ولكن لا يزال لا يعمل:

<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>

يمكن لأي شخص نشر مثال؟

هل كانت مفيدة؟

المحلول

تحديث (2017)

تعتبر المتصفحات الحديثة الآن عرض رسالة مخصصة لتكون خطرا أمنيا ولذا إزالة من كل منهم. المتصفحات الآن فقط عرض الرسائل العامة. نظرا لأننا لم يعد لدينا ما يدعو للقلق بشأن تحديد الرسالة، فهي بسيطة مثل:

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

اقرأ أدناه للحصول على دعم المتصفح القديم.

تحديث (2013)

الإجابة الأصلية مناسبة ل IE6-8 و FX1-3.5 (وهذا ما كنا نستهدفه في عام 2009 عندما تم كتابته)، ولكنه خارج التاريخ الآن ولن يعمل في معظم المتصفحات الحالية - لقد تركت ذلك أدناه للإشارة.

ال window.onbeforeunload لا يعامل باستمرار من قبل جميع المتصفحات. يجب أن تكون مرجعا لوظيفة وليس سلسلة (نظرا لأن الإجابة الأصلية المذكورة) ولكن ذلك سيعمل في المتصفحات القديمة لأن الشيكات لمعظمها يبدو أن أي شيء يتم تعيين أي شيء onbeforeunload (بما في ذلك وظيفة تعود null).

تعيين window.onbeforeunload إلى مرجع دالة، ولكن في المتصفحات القديمة عليك ضبط returnValue من الحدث بدلا من مجرد إعادة سلسلة:

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;
};

لا يمكنك الحصول على ذلك confirmOnPageExit قم بفحص وإرجاع NULL إذا كنت تريد متابعة المستخدم بدون الرسالة. ما زلت بحاجة إلى إزالة الحدث إلى تشغيلها وإيقافها بشكل موثوق:

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

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

الإجابة الأصلية (عملت في عام 2009)

لتحويله:

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

لإيقاف تشغيله:

window.onbeforeunload = null;

ضع في اعتبارك أن هذا ليس حدثا طبيعيا - لا يمكنك ربطه بالطريقة القياسية.

للتحقق من القيم؟ هذا يعتمد على إطار التحقق الخاص بك.

في jQuery، قد يكون هذا شيء مثل (مثال أساسي للغاية):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

نصائح أخرى

ال onbeforeunload Microsoft-ISM هو أقرب شيء يتعين علينا وجود حل قياسي، ولكن يجب أن يدرك أن دعم المتصفح غير متساو؛ على سبيل المثال بالنسبة للأوبرا التي تعمل فقط في الإصدار 12 والإصدارات الأحدث (لا تزال في بيتا اعتبارا من هذه الكتابة).

أيضا، ل التوافق الأقصى, ، عليك أن تفعل أكثر من مجرد إرجاع سلسلة، كما هو موضح على شبكة مطور موزيلا.

مثال: حدد الوظائف التالية لتمكين / تعطيل موجه الملاحة (مثال MDN):

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

ثم حدد نموذجا مثل هذا:

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

بهذه الطريقة، سيتم حذر المستخدم إلا من التنقل إلا إذا قام بتغيير منطقة النص، ولن تتم مطالبته عندما يقوم بالفعل بتقديم النموذج.

لجعل هذا العمل في Chrome و Safari، عليك أن تفعل ذلك مثل هذا

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

مرجع: https:/developer.mozilla.org/en/dom/window.onbeforeunload.

مع jQuery. هذه الأشياء سهلة جدا للقيام به. نظرا لأنك تستطيع ربط مجموعات.

لا يكفي للقيام بالتنزيل Onbeforeunnload، فأنت تريد أن تؤدي فقط إلى التنقل بعيدا إذا بدأ شخص ما في تحرير الأشياء.

عمل jQuerys 'preconload' عمل رائع بالنسبة لي

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

هذه طريقة سهلة لتقديم الرسالة إذا كانت أي بيانات مدخل في النموذج، وعدم إظهار الرسالة إذا تم تقديم النموذج:

$(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;
    });
})

بالنسبة للأشخاص الجدد الذين يبحثون عن حل بسيط، فقط حاول areyouse.js.

للتوسع في كيث بالفعل إجابة مذهلة:

رسائل تحذير مخصصة

للسماح برسائل تحذير مخصصة، يمكنك التفاف ذلك في وظيفة مثل هذا:

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;
}

ثم اتصل فقط بهذه الوظيفة مع رسالتك المخصصة:

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

تمكين الملاحة مرة أخرى

لإعادة تمكين الملاحة، تم تعيين كل ما عليك القيام به window.onbeforeunload ل null. وبعد هنا هو، ملفوفة في وظيفة صغيرة أنيقة يمكن استدعاؤها في أي مكان:

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

باستخدام jQuery لربط هذا لعناصر النموذج

إذا كان ذلك باستخدام JQuery، فلا يمكن ربط ذلك بسهولة جميع عناصر نموذج مثل هذا:

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

ثم للسماح لتقديم النموذج:

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

الأشكال المعدلة ديناميكيا:

preventNavigation() و enableNavigation() يمكن ربطها بأي وظائف أخرى حسب الحاجة، مثل تعديل نموذج ديناميكيا أو النقر على زر يرسل طلب AJAX. فعلت هذا من خلال إضافة عنصر إدخال مخفي إلى النموذج:

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

ثم في أي وقت أريد منع المستخدم من التنقل بعيدا، وأثقل التغيير على تلك المدخلات للتأكد من ذلك preventNavigation() يتم تنفيذها:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

جرب هذا الأمر يعمل بنسبة 100٪ 

<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>

عندما يبدأ المستخدم في إجراء تغييرات على النموذج، سيتم تعيين علامة منطقية. إذا حاول المستخدم انتقل بعيدا عن الصفحة، فأنت تحقق من هذا العلم في window.onunload. حدث. إذا تم تعيين العلم، فأظهر الرسالة عن طريق إرجاعها كسلسلة. إرجاع الرسالة كسلسلة سوف ينبثق حوار تأكيد يحتوي على رسالتك.

إذا كنت تستخدم AJAX لارتكاب التغييرات، يمكنك تعيين العلم إلى false بعد الالتزام بالتغييرات (أي في حدث نجاح AJAX).

ال الولايات القياسية يمكن التحكم في هذا المطالبة عن طريق إلغاء beforeunload. الحدث أو تحديد قيمة الإرجاع إلى قيمة غير فارغة. وبعد كما ينص على أنه يجب على المؤلفين استخدام الحدث .PreventDefault () بدلا من إعادة القيمة، والرسالة الموضحة للمستخدم غير قابل للتخصيص.

اعتبارا من 69.0.3497.92، لم يلتق الكروم بالمعيار. ومع ذلك، هناك تقرير الشوائب المقدمة، و مراجعة هو في التقدم. يتطلب Chrome إعادة تعيين العودة بالرجوع إلى كائن الحدث، وليس القيمة التي تم إرجاعها بواسطة المعالج.

تقع على عاتق صاحب البلاغ مسؤولية تتبع ما إذا كان قد تم إجراء تغييرات؛ يمكن القيام به بمتغير أو عن طريق ضمان التعامل مع الحدث إلا عند الضرورة.

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';

يمكنك إضافة onchange حدث على TextArea (أو أي حقول أخرى) تعيين متغير في JS. عندما يحاول المستخدم إغلاق الصفحة (window.onunload)، يمكنك التحقق من قيمة هذا المتغير وإظهار التنبيه وفقا لذلك.

بناء على جميع الإجابات على هذا الموضوع، كتبت الرمز التالي ويعمل من أجلي.

إذا كان لديك فقط بعض علامات الإدخال / Textarea فقط التي تتطلب فحص حدث Onunload، فيمكنك تعيين سمات بيانات HTML5 كما data-onunload="true"

على سبيل المثال.

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

و JavaScript (JQUERY) يمكن أن تبدو مثل هذا:

$(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?";   
    };
});

هنا هو بلدي 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>

وهكذا فإن هذا هو كيف فعلت شيئا مشابها في جافا سكريبت

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!");
}
}

يمكن القيام به بسهولة عن طريق إعداد changeflag. إلى TRUE، على على التغيير حدث من TextArea.. وبعد استخدم جافا سكريبت لإظهار تؤكد مربع الحوار بناء على changeflag. القيمة. تجاهل النموذج والانتقال إلى الصفحة المطلوبة إذا تؤكد إرجاع صحيح، آخر لا تفعل شيئا.

ما تريد استخدامه هو حدث Onunload في JavaScript.

هنا مثال: http://www.w3schools.com/jsref/event_onunload.asp.

هناك معلمة "تحميل onunload" لعلامة الجسم، يمكنك استدعاء وظائف JavaScript من هناك. إذا عاد خطأ، فإنه يمنع التنقل بعيدا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top