جاوااسکریپت - بهترین روش برای تشخیص زمانی که کاربر یک صفحه وب را ترک میکند؟

بهترین راه برای تشخیص اینکه کاربر یک صفحه وب را ترک کرده چیست؟

رویداد onunload در جاوااسکریپت همیشه کار نمیکند (در خواست HTTP بیشتر از زمانی که برای بستن مرورگر لازم است طول میکشد).

ایجاد یک مورد احتمالاً توسط مرورگرهای فعلی مسدود خواهد شد.

پاسخ شماره ۱

رویداد onbeforeunload را امتحان کنید: این رویداد درست قبل از بارگذاری صفحه فعال میشود. همچنین به شما اجازه میدهد بازپرس کنید که آیا کاربر واقعاً میخواهد صفحه را ترک کند یا نه. دموی onbeforeunload Demo را ببینید.

به طور متناوب، میتوانید زمانی که او میرود، یک درخواست آژاکس ارسال کنید.

پاسخ شماره ۲

شبکه توسعهدهندگان موزیلا شرح و مثال خوبی از onbeforeunload دارد.

اگر میخواهید قبل از ترک صفحه به کاربر هشدار دهید در صورتی که صفحه شما تغییر کرده است (یعنی اگر کاربر دادهای وارد کرده باشد):

window.addEventListener('beforeunload', function(e) {
  var myPageIsDirty = ...; //you implement this logic...
  if(myPageIsDirty) {
    //following two lines will cause the browser to ask the user if they
    //want to leave. The text of this dialog is controlled by the browser.
    e.preventDefault(); //per the standard
    e.returnValue = ''; //required for Chrome
  }
  //else: user is allowed to leave without a warning dialog
});

پاسخ شماره ۳

در اینجا یک راهحل جایگزین وجود دارد - از آنجایی که در اکثر مرورگرها کنترلهای ناوبری (نوار ناوبری، تبها و غیره) در بالای منطقه محتوای صفحه قرار دارند، میتوانید با تشخیص خروج نشانگر ماوس از بالای صفحه، یک پنجره گفتگو «قبل از ترک» نمایش دهید. این کاملاً بدون مزاحمت است و به شما امکان میدهد قبل از اینکه کاربر واقعاً اقدام به ترک صفحه کند، با او تعامل داشته باشید.

$(document).bind("mouseleave", function(e) {
    if (e.pageY - $(window).scrollTop() <= 1) {    
        $('#BeforeYouLeaveDiv').show();
    }
});

نقطه منفی این است که البته این یک حدس است که کاربر واقعاً قصد ترک کردن دارد، اما در اکثریت قریب به اتفاق موارد درست است.

پاسخ شماره ۴

در صورتی که نیاز به انجام برخی کدهای ناهمزمان دارید (مثل ارسال پیامی به سرور وقتی که کاربر در حال حاضر بر روی صفحه شما تمرکز ندارد)، رویداد beforeunload زمان کافی برای اجرای کد ناهمزمان نمیدهد. در مورد کدهای ناهمزمان، من متوجه شدم که رویدادهای visibilitychange و mouseleave بهترین گزینهها هستند. این رویدادها زمانی اجرا میشوند که کاربر تب را تغییر دهد، مرورگر را پنهان کند، یا موس را از محدوده پنجره خارج کند.

document.addEventListener('mouseleave', e=>{
     //do some async code
})

document.addEventListener('visibilitychange', e=>{
     if (document.visibilityState === 'visible') {
   //report that user is in focus
    } else {
     //report that user is out of focus
    }  
})