منع صفحة الويب من التنقل بعيدًا باستخدام JavaScript

Question

كيف تمنع صفحة الويب من التنقل بعيدًا باستخدام JavaScript؟

Answer 1

وعن طريق onunload يسمح فقط لعرض الرسائل، لكنه لن يقطع الملاحة (لأن فوات الأوان). ومع ذلك، يمكنك استخدام onbeforeunload، وسوف يقطع الملاحة:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

تعديل : في. confirm() إزالتها في بيان عودة لأن هذا تسبب في نافذة تأكيد كما هو متوقع، ولكن أظهرت أيضا تأكيد الثاني مع نتيجة أكد أولا

Answer 2

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

نظرًا لأنه يعمل عن طريق التنقل المباشر بدائرة قصيرة، فلا يمكن استخدامه لمنع إغلاق الصفحة؛ومع ذلك، يمكن استخدامه لتعطيل خرق الإطار.

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

تنصل: لا ينبغي عليك أن تفعل هذا أبدًا.إذا كانت الصفحة تحتوي على رمز خرق الإطار، فيرجى احترام رغبات المؤلف.

Answer 3

وانتهى بي الأمر مع هذا الإصدار مختلف قليلا:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

وعلى صعيد آخر أنا وضعت علامة سيئ إلى true عندما يحصل موسخ النموذج (أو أريد ذلك لمنع التنقل بعيدا). هذا يتيح لي التحكم بسهولة أم لا يحصل المستخدم موجه الإنتقال تأكيد.

ومع النص في الإجابة المحددة ترى المطالبات المكررة:

Answer 4

في المثال ايمن بالعودة كاذبة على منع نافذة المتصفح / علامة التبويب من الإغلاق.

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

Answer 5

وأي ما يعادل بطريقة متوافقة أكثر حداثة والمتصفح، وذلك باستخدام واجهات برمجة التطبيقات addEventListener الحديثة.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

المصدر: https://developer.mozilla.org/en- الولايات المتحدة / مستندات / الانترنت / فعاليات / beforeunload

Answer 6

وأي ما يعادل إلى الإجابة المقبولة في مسج 1.11:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

مثال

JSFiddle

والجواب altCognito لاستخدام الحدث unload، والذي يحدث في وقت متأخر جدا لجافا سكريبت لإجهاض الملاحة.

Answer 7

معالج onunload .

لمسج، وأعتقد أن هذا يعمل مثل ذلك:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

Answer 8

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

في الكروم، والنص المعروض بعد الرسالة العرف هو: "هل أنت متأكد أنك تريد مغادرة هذه الصفحة؟". في فايرفوكس، فإنه لا يعرض رسالة خطأ مخصصة لدينا على الإطلاق (ولكن لا يزال يعرض الحوار).

وربما تكون رسالة خطأ أكثر المناسبة:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

وأو أسلوب ستاكوفيرفلوو: "لقد بدأت الكتابة أو تحرير آخر"

Answer 9

إذا كنت الاصابة على المتصفح الظهر / زر التقديم و لا تريد أن تبحر بعيدا، يمكنك استخدام:

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

وخلاف ذلك، يمكنك استخدام beforeunload الحدث، ولكن الرسالة قد أو قد لا تعمل عبر متصفح، ويتطلب عودته وهو الأمر الذي يفرض المدمج في موجه.