उपयोगकर्ता द्वारा वेब पेज छोड़ने पर पता लगाने का सबसे अच्छा तरीका?

Question

यदि उपयोगकर्ता किसी वेब पेज को छोड़ता है, तो यह पता लगाने का सबसे अच्छा तरीका क्या है?

onunloadJavaScript घटना हर बार काम नहीं करता है (HTTP अनुरोध समय लेता है की तुलना में समय ब्राउज़र को समाप्त करने के लिए आवश्यक)।

एक बनाना संभवतः वर्तमान ब्राउज़रों द्वारा अवरुद्ध किया जाएगा।

Answer 1

onbeforeunloadईवेंट को आज़माएं : पेज अनलोड होने से ठीक पहले इसे निकाल दिया जाता है। यह आपको वापस पूछने की अनुमति देता है यदि उपयोगकर्ता वास्तव में छोड़ना चाहता है। डेमो onbeforeunload डेमो देखें ।

वैकल्पिक रूप से, आप एक अजाक्स अनुरोध भेज सकते हैं जब वह निकल जाता है।

Comments

यदि आपने फ़ॉर्म को बदल दिया है और यदि यह किया है तो केवल संकेत मिलने पर यह उपयोगकर्ता के लिए अच्छा होगा - इसलिए यह कष्टप्रद नहीं है।

— adam0101

यह भी ध्यान दें कि विभिन्न मोबाइल ब्राउज़र घटना के परिणाम की अनदेखी करते हैं (अर्थात, वे उपयोगकर्ता से पुष्टि के लिए नहीं पूछते हैं)। फ़ायरफ़ॉक्स के बारे में एक छिपी प्राथमिकता है: उसी को करने के लिए कॉन्फ़िगर करें। संक्षेप में इसका मतलब है कि उपयोगकर्ता हमेशा पुष्टि करता है कि दस्तावेज़ अनलोड किया जा सकता है।

— एमजेबी

ध्यान दें कि उपयोगकर्ता द्वारा पृष्ठ को ताज़ा करने या फ़ॉर्म सबमिट करने पर यह विधि भी विकसित होती है।

— ज़ायतसेव दिमित्री

@ और पीटरसन, मेरे पास उपयोगकर्ता सत्र को छोड़ने के उद्देश्य से एक ही चुनौती है। अगर मैं परियोजना के अंतर्गत आता हूं, तो मैं यह जांचने के लिए टाइप किए गए url को कैसे पकड़ सकता हूं?

— Jcc.Sanabria

Answer 2

मोज़िला डेवलपर नेटवर्क का एक अच्छा विवरण है और उदाहरण के लिए 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
});

Answer 3

यहां एक वैकल्पिक समाधान है - चूंकि अधिकांश ब्राउज़रों में नेविगेशन नियंत्रण (नौसेना बार, टैब, आदि) पृष्ठ सामग्री क्षेत्र के ऊपर स्थित हैं, तो आप माउस पॉइंटर को पृष्ठ के शीर्ष से बाहर निकलने का पता लगा सकते हैं और " आपके जाने से पहले " प्रदर्शित कर सकते हैं । संवाद। यह पूरी तरह से विनीत है और इससे पहले कि वे वास्तव में छोड़ने के लिए क्रिया करने से पहले आपको उपयोगकर्ता के साथ बातचीत करने की अनुमति दें।

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

नकारात्मक पक्ष यह है कि निश्चित रूप से यह अनुमान है कि उपयोगकर्ता वास्तव में छोड़ने का इरादा रखता है, लेकिन अधिकांश मामलों में यह सही है।

Comments

मैं ऐसा कुछ देख रहा हूं, मैं अपने उपयोगकर्ता को कुछ विनीत दिखाना चाहता हूं, अपने पृष्ठ को छोड़ने से पहले, मैं बैक बटन पर एक हॉवर ईवेंट की तरह कुछ देख रहा हूं, क्योंकि उपयोगकर्ता को वापस जाने के लिए क्लिक करने से पहले मुझे इवेंट को फायर करना होगा। मेरा मानना ​​है कि सबसे अच्छा तरीका वास्तव में माउस शरीर छोड़ने के दस्तावेज का पता लगाना है, और यह निर्धारित करने के लिए कुछ तर्क करना है कि उपयोगकर्ता ने पृष्ठ के साथ बातचीत की या नहीं।

— लियोनार्डो सूजा पाइवा

Answer 4

इसके लिए मैं उपयोग कर रहा हूं:

window.onbeforeunload = function (e) {

}

पृष्ठ को उतारने से ठीक पहले इसे निकाल दिया जाता है।

Comments

ओपेरा 12 और पुराने संस्करण इसका समर्थन नहीं करते हैं ... zachleat.com/web/…

— साइरस

यह कैसे, किसी भी पिछले दो जवाब है कि एक ही समाधान दे तुलना में बेहतर है onbeforeunload?

— डेन डैस्कलेस्कु

Answer 5

मुझे पता है कि इस सवाल का जवाब दिया गया है, लेकिन अगर आप वास्तविक BROWSER बंद होने पर केवल ट्रिगर करना चाहते हैं, और यही नहीं जब पगेलोड होता है, तो आप इस कोड का उपयोग कर सकते हैं:

window.onbeforeunload = function (e) {
        if ((window.event.clientY < 0)) {
            //window.localStorage.clear();
            //alert("Y coords: " + window.event.clientY)
        }
};

मेरे उदाहरण में, मैं स्थानीय भंडारण को साफ कर रहा हूं और उपयोगकर्ता को m पति y कोर्ड्स के साथ अलर्ट कर रहा हूं, केवल जब ब्राउज़र बंद हो जाता है, तो इसे प्रोग्राम के भीतर से सभी पेज लोड पर ध्यान नहीं दिया जाएगा।

Comments

window.event मेरे लिए अपरिभाषित है

— कार्ल ग्लेसर

मेर लीडर का उदाहरण गलत है, window.event का उपयोग केवल IE के पुराने संस्करणों के उदाहरण के लिए कमबैक के रूप में किया जाना चाहिए, अन्य मामलों में, घटना पैरामीटर ( eइस मामले में चर) का उपयोग किया जाना चाहिए: stackoverflow.com/questions/9813445/ …

— Sk8erPeter

जहाँ तक मैं गलत हूँ कहने के लिए नहीं जाऊँगा। मेरे उदाहरण IE और क्रोम में मेरे लिए ठीक काम करते हैं। मेरा उदाहरण इस परिदृश्य के लिए था कि उपयोगकर्ता वेब ब्राउज़र पर X (बंद) पर क्लिक करता है। और न ही सबसे सुंदर तरीका, लेकिन यह काम करता है।

— लीडर

MDN से: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. developer.mozilla.org/en-US/docs/Web/API/Window/event

— रॉबिन नील

Answer 6

इसे करने के लिए एक (थोड़ा हैसी) तरीका प्रतिस्थापित और लिंक है जो आपकी साइट से दूर AJAX कॉल के साथ सर्वर-साइड पर जाता है, जो उपयोगकर्ता को छोड़ने का संकेत देता है, फिर उपयोगकर्ता को बाहरी साइट पर ले जाने के लिए उसी जावास्क्रिप्ट ब्लॉक का उपयोग करें 'अनुरोध किया है।

यदि उपयोगकर्ता केवल ब्राउज़र विंडो बंद कर देता है या नए URL में टाइप करता है तो निश्चित रूप से यह काम नहीं करेगा।

इसके चारों ओर पाने के लिए, आपको संभावित रूप से जावास्क्रिप्ट का सेटटाइमआउट () पृष्ठ पर उपयोग करना होगा, जिससे हर कुछ सेकंड में एक AJAX कॉल किया जा सकेगा (इसके आधार पर आप कितनी जल्दी जानना चाहते हैं कि उपयोगकर्ता छोड़ दिया है)।

Comments

यदि आप रिपोर्ट होम एप्रोच का उपयोग करते हैं, तो पृष्ठ के प्रत्येक लिंक को संशोधित करने की कोई आवश्यकता नहीं है।

— विंको वर्सालोविच

Answer 7

सेवा श्रमिकों के लिए धन्यवाद , क्लाइंट-साइड पर एडम के विशुद्ध रूप से इसी तरह के समाधान को लागू करना संभव है , बशर्ते ब्राउज़र इसका समर्थन करता है। बस दिल की धड़कन अनुरोधों को दरकिनार करें:

// The delay should be longer than the heartbeat by a significant enough amount that there won't be false positives
const liveTimeoutDelay = 10000
let liveTimeout = null

global.self.addEventListener('fetch', event => {
  clearTimeout(liveTimeout)
  liveTimeout = setTimeout(() => {
    console.log('User left page')
    // handle page leave
  }, liveTimeoutDelay)
  // Forward any events except for hearbeat events
  if (event.request.url.endsWith('/heartbeat')) {
    event.respondWith(
      new global.Response('Still here')
    )
  }
})

Comments

क्या आपका मतलब है कि क्लाइंट कोड में कहीं, एक होने की जरूरत है setInterval(() => fetch('/heartbeat'), 5000)?

— डेन डैस्कलेस्क्यू

@DanDascalescu सही। जेएस कोड एक नेटवर्क अनुरोध / दिल की धड़कन का अनुरोध करता है, और सेवा कार्यकर्ता इसे स्वीकार करता है।

— जेफरी स्वीनी

Answer 8

मामले में आपको कुछ एसिंक्रोनस कोड करने की आवश्यकता होती है (जैसे कि सर्वर को संदेश भेजना कि उपयोगकर्ता अभी आपके पृष्ठ पर केंद्रित नहीं है), ईवेंट beforeunloadको चलाने के लिए async कोड को समय नहीं देगा। Async के मामले में मैंने पाया कि 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
    }  
})

Answer 9

इसके लायक क्या है, यह वही है जो मैंने किया और शायद यह दूसरों के लिए मदद कर सकता है भले ही लेख पुराना हो।

पीएचपी:

session_start();

$_SESSION['ipaddress'] = $_SERVER['REMOTE_ADDR'];

if(isset($_SESSION['userID'])){
    if(!strpos($_SESSION['activeID'], '-')){
        $_SESSION['activeID'] = $_SESSION['userID'].'-'.$_SESSION['activeID'];
    }
}elseif(!isset($_SESSION['activeID'])){
    $_SESSION['activeID'] = time();
}

जे एस

window.setInterval(function(){
            var userid = '<?php echo $_SESSION['activeID']; ?>';
            var ipaddress = '<?php echo $_SESSION['ipaddress']; ?>';
            var action = 'data';

            $.ajax({
                url:'activeUser.php',
                method:'POST',
                data:{action:action,userid:userid,ipaddress:ipaddress},
                success:function(response){
                     //alert(response);                 
                }
            });
          }, 5000);

Ajax activeUser.php पर कॉल करें

if(isset($_POST['action'])){
    if(isset($_POST['userid'])){
        $stamp = time();
        $activeid = $_POST['userid'];
        $ip = $_POST['ipaddress'];

        $query = "SELECT stamp FROM activeusers WHERE activeid = '".$activeid."' LIMIT 1";
        $results = RUNSIMPLEDB($query);

        if($results->num_rows > 0){
            $query = "UPDATE activeusers SET stamp = '$stamp' WHERE activeid = '".$activeid."' AND ip = '$ip' LIMIT 1";
            RUNSIMPLEDB($query);
        }else{
            $query = "INSERT INTO activeusers (activeid,stamp,ip)
                    VALUES ('".$activeid."','$stamp','$ip')";
            RUNSIMPLEDB($query);
        }
    }
}

डेटाबेस:

CREATE TABLE `activeusers` (
  `id` int(11) NOT NULL,
  `activeid` varchar(20) NOT NULL,
  `stamp` int(11) NOT NULL,
  `ip` text
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

मूल रूप से हर 5 सेकंड में js एक php फाइल पर पोस्ट होता है जो उपयोगकर्ता और उपयोगकर्ताओं के आईपी पते को ट्रैक करेगा। सक्रिय उपयोगकर्ता केवल एक डेटाबेस रिकॉर्ड है जो 5 सेकंड के भीतर डेटाबेस समय टिकट के लिए एक अद्यतन है। पुराने उपयोगकर्ता डेटाबेस को अपडेट करना बंद कर देते हैं। आईपी ​​पते का उपयोग केवल यह सुनिश्चित करने के लिए किया जाता है कि एक उपयोगकर्ता अद्वितीय है इसलिए साइट पर 2 लोग 1 उपयोगकर्ता के रूप में पंजीकरण नहीं करते हैं।

शायद सबसे कुशल समाधान नहीं है, लेकिन यह काम करता है।