2009-02-20 20 views
29

जब हम पृष्ठ (F5, या ब्राउज़र में आइकन) रीफ्रेश करते हैं, तो यह पहले ट्रिगर ऑन्यून ईवेंट होगा। जब हम ब्राउज़र को बंद करते हैं (दाएं शीर्ष आइकन पर एक्स), तो यह ट्रिगर चालू ईवेंट होगा। अब जब चालू ईवेंट ट्रिगर होता है, तो पृष्ठ को रीफ्रेश करने या ब्राउज़र को बंद करने के बीच अंतर करने का कोई तरीका नहीं है। यदि आपके पास कोई समाधान है तो मुझे दें।रीफ्रेश और ब्राउज़र क्रियाओं को बंद करने के बीच पहचान

+0

इसी तरह के प्रश्नों के लिए भी देखें: http://stackoverflow.com/questions/4387212/differentiate-between-f5-and-browser-close-event-in-flex-actionscript और http://stackoverflow.com/questions/1631 9 5 9/ब्राउज़र-विंडो-क्लोज-इवेंट –

+0

यहां उत्तर दिया गया है कि आधुनिक ब्राउज़र में HTML5 एपीआई के माध्यम से पेज रीलोडिंग का पता कैसे लगाएं। (मेरे लिए काम करता है): https://stackoverflow.com/questions/5004978/check-if-page -gets-reloaded-or-refreshed-in-जावास्क्रिप्ट –

उत्तर

-6
<html> 
<body onunload="doUnload()"> 
<script> 
    function doUnload(){ 
    if (window.event.clientX < 0 && window.event.clientY < 0){ 
     alert("Window closed"); 
    } 
    else{ 
     alert("Window refreshed"); 
    } 
    } 
</script> 
</body> 
</html> 
+0

क्या यह सभी ब्राउज़रों पर काम करता है? कृपया मुझे कुछ टिप्पणियों के साथ दें। –

+0

धन्यवाद दोस्त, लेकिन आपका कोड एफएफ ब्राउज़र काम नहीं कर रहा है, इसलिए कृपया मुझे एक और जवाब सुझाएं। –

+0

कृपया अन्य उत्तर देखें। यह आपके लिए काम करना चाहिए। अगर यह काम करता है, तो कृपया उत्तर को सही के रूप में चिह्नित करें ताकि अन्य जान सकें। –

-2

मेरा पहले समाधान आईई में मेरे लिए काम करता था। window.event IE के अलावा अन्य ब्राउज़रों के लिए अपरिभाषित होगा क्योंकि 'ईवेंट' को अन्य ब्राउज़रों के विपरीत आईई में विश्व स्तर पर परिभाषित किया गया है। आपको अन्य ब्राउज़रों के मामले में ईवेंट को पैरामीटर के रूप में आपूर्ति करने की आवश्यकता होगी। साथ ही क्लाइंटएक्स को फ़ायरफ़ॉक्स के लिए परिभाषित नहीं किया गया है, हमें पेजएक्स का उपयोग करना चाहिए।

कुछ इस तरह की कोशिश करो .... IE और Firefox इस के लिए काम करना चाहिए ...

<html> 
<body> 
<script type="text/javascript"> 

window.onunload = function(e) { 
// Firefox || IE 
e = e || window.event; 

var y = e.pageY || e.clientY; 

if(y < 0) alert("Window closed"); 
else alert("Window refreshed"); 

} 
</script> 
</body> 
</html> 
+0

धन्यवाद Liv 1, मैंने इस कोड को आजमाया लेकिन यह फ़ायरफ़ॉक्स में ठीक से काम नहीं करता है, इस समस्या में तब होता है जब टैब बंद होता है और रीफ्रेश बटन क्लिक किया जाता है। यदि आपके पास कोई अन्य समाधान है तो कृपया मुझे दें .. –

+0

@renegadeMind, क्या यह आपके लिए काम करता है? –

+3

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

6

दुर्भाग्य से, घटना के clientY/pageY मूल्य निरीक्षण के रूप में जवाब यहां के कुछ लोगों द्वारा सुझाव दिया है, यह निर्धारित करने का एक विश्वसनीय तरीका नहीं है कि पृष्ठ को बंद करने वाले उपयोगकर्ता के परिणामस्वरूप unload ईवेंट निकाल दिया जा रहा है या नहीं।

कारण clientY/pageY नकारात्मक है जब आप ब्राउज़र के बंद बटन पर क्लिक करते हैं तो नकारात्मक बटन दस्तावेज़ के शीर्ष (यानी ऊपर पिक्सेल 0) के ऊपर स्थित होता है, लेकिन पुनः लोड बटन का अर्थ है कि पुनः लोड बटन पर क्लिक करना इसके परिणामस्वरूप clientY/pageY के लिए नकारात्मक मान भी होगा।

घटना के एक्स समन्वय का निरीक्षण करने के पथ को नीचे जाना भी समस्याग्रस्त है क्योंकि ब्राउज़र बंद बटन हमेशा खिड़की के दायीं तरफ नहीं है (उदाहरण के लिए यह ओएस एक्स में बाईं ओर है) और क्योंकि खिड़की को अपने टैब को बंद करके या कीबोर्ड के माध्यम से बंद किया जा सकता है।

39

एक समाधान है।

मैं उपयोगकर्ता को सर्वर पर डिस्कनेक्ट करना चाहता था जब टैब या ब्राउज़र विंडो बंद हो गई थी, लेकिन पृष्ठ को फिर से लोड नहीं किया गया था (आप एक अलग उद्देश्य के लिए पुनः लोड/बंद घटनाओं को अलग करना चाहते हैं लेकिन आप मेरे समाधान से लाभ उठा सकते हैं)।

  1. अपने पृष्ठ पर

    , निम्नलिखित हैंडलर (छद्म जावास्क्रिप्ट) को window के लिए एक onunload जोड़ें::

    मैं एचटीएमएल 5 के स्थानीय संग्रहण और क्लाइंट/सर्वर AJAX के संचार के आधार पर निम्न प्रक्रिया के साथ समाप्त हो गया, (छद्म जावास्क्रिप्ट)
    function myUnload(event) { 
        if (window.localStorage) { 
         // flag the page as being unloading 
         window.localStorage['myUnloadEventFlag']=new Date().getTime(); 
        } 
    
        // notify the server that we want to disconnect the user in a few seconds (I used 5 seconds) 
        askServerToDisconnectUserInAFewSeconds(); // synchronous AJAX call 
    } 
    
  2. अपने पृष्ठ पर

    , निम्नलिखित हैंडलर को body पर एक onload जोड़ें:

    function myLoad(event) { 
        if (window.localStorage) { 
         var t0 = Number(window.localStorage['myUnloadEventFlag']); 
         if (isNaN(t0)) t0=0; 
         var t1=new Date().getTime(); 
         var duration=t1-t0; 
         if (duration<10*1000) { 
          // less than 10 seconds since the previous Unload event => it's a browser reload (so cancel the disconnection request) 
          askServerToCancelDisconnectionRequest(); // asynchronous AJAX call 
         } else { 
          // last unload event was for a tab/window close => do whatever you want (I do nothing here) 
         } 
        } 
    } 
    
  3. सर्वर पर 10
  4. , सूची में डिस्कनेक्शन अनुरोध एकत्र करें और एक टाइमर थ्रेड सेट करें जो नियमित अंतराल पर सूची का निरीक्षण करता है (मैंने हर 20 सेकंड का उपयोग किया)। एक बार डिस्कनेक्शन अनुरोध टाइमआउट (यानी 5 सेकंड चले गए हैं), उपयोगकर्ता को सर्वर से डिस्कनेक्ट करें। यदि इस दौरान डिस्कनेक्शन अनुरोध रद्द किया जाता है, तो सूची से संबंधित डिस्कनेक्शन अनुरोध हटा दिया जाता है, ताकि उपयोगकर्ता डिस्कनेक्ट नहीं हो सके।

यह दृष्टिकोण भी लागू होता है यदि आप टैब/विंडो बंद घटना के बीच अंतर करना चाहते हैं और लिंक या सबमिट किए गए फॉर्म का पालन करना चाहते हैं। आपको केवल दो ईवेंट हैंडलर को प्रत्येक पृष्ठ पर रखना होगा जिसमें लिंक और फॉर्म और प्रत्येक लिंक/फॉर्म लैंडिंग पृष्ठ पर हों।

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

यह दृष्टिकोण उन ब्राउज़रों तक सीमित है जो एचटीएमएल 5 स्थानीय स्टोरेज का समर्थन करते हैं, इसलिए आप शायद पुराने ब्राउज़र जैसे एमएसआईई 7 के लिए विशिष्ट दृष्टिकोण का उपयोग करेंगे।

event.clientY पर आधारित अन्य दृष्टिकोण विश्वसनीय नहीं हैं क्योंकि यह मान रीलोड या टैब/विंडो बंद बटन पर क्लिक करते समय नकारात्मक है, और जब कीबोर्ड शॉर्टकट को पुनः लोड करने के लिए उपयोग किया जाता है तो सकारात्मक होता है (उदाहरण के लिए F5, Ctrl-R, ...) और खिड़की बंद (उदाहरण के लिए Alt-F4)। ईवेंट एक्स स्थिति पर निर्भर करना भी भरोसेमंद नहीं है क्योंकि बटन प्रत्येक ब्राउज़र पर समान स्थिति में नहीं रखे जाते हैं (उदा। बाएं बटन बंद करें)।

+2

मैं 'लोकस्टोरेज' के बजाय 'sessionStorage' का उपयोग करूंगा क्योंकि आप केवल रीलोड ट्रैक कर रहे हैं, इसके लिए कोई कारण नहीं है। –

+1

यहां जवाब दिया गया है कि आधुनिक ब्राउज़र में HTML5 एपीआई के माध्यम से पृष्ठ रीलोडिंग का पता कैसे लगाएं। (मेरे लिए काम करता है): https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in -जवास्क्रिप्ट –

+1

@ राजबशकीरोव यह उत्तर अनलोड ईवेंट के दौरान रीफ्रेश का पता लगाने के लिए लागू नहीं होता है। – cdonner

0

मामले से दूर नेविगेट करने के लिए विंडो के लिए window.onbeforeunload ईवेंट का उपयोग करें, लेकिन इसमें रीफ्रेशिंग या एंकर टैग शामिल होंगे .... इसके लिए एक सत्यापन ध्वज का उपयोग करें, प्रक्रिया के लिए 1 उदाहरण URL चेक (प्रारंभिक है यूआरएल = वर्तमान यूआरएल) या एफ 5 रीफ्रेश के लिए कीकोड का उपयोग करके चेक करें, एंकर टैग के मामले में बाइंड()

नोट * कुंजीकोड क्रोम के मामले में समस्या का कारण बन सकता है।

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>Test Page</title> 

<style type='text/css'> 
body { 
    font-family: sans-serif; 
} 
</style> 
<script src="jquery-1.9.1.js" type='text/javascript'></script> 
<script type='text/javascript'> 
var valid=false; 
function wireUpEvents() { 

if(valid){ 
alert("Page Refreshed or Redirected"); 
}else{ 

window.onbeforeunload = askWhetherToClose; 

} 
function askWhetherToClose(event) { 

if(!valid){ 

    var msg; 

    msg = "You're leaving the page, do you really want to?"; 
    event = event || window.event; 
    event.returnValue = msg; 
    return msg; 
}} 
$(document).bind('keypress', function(e) { 
if (e.keyCode == 116){ 

// or you can insert some code to check page refresh 
valid = true; 

//wireUpEvents(); 
} 
}); 
$("a").bind("click", function() { 
//To check redirection using Anchor tags 
valid = true; 
//wireUpEvents(); 
}); 
} 
$(document).ready(function() { 
wireUpEvents(); 

}); 
</script> 
</head> 
<body> 
<p>Close the browser window, or navigate to <a href="http://stackoverflow.com">StackOverflow</a></p> 
</body> 
</html> 
+1

यह कोड काम नहीं कर रहा है जब कोई उपयोगकर्ता ब्राउज़र संदर्भ या बैक बटन क्लिक करता है .. – SwR

0

मैं सिर्फ यह कोशिश की है और यह समस्या हल हो जाती: एक sessionStorage वस्तु जो जब उपयोगकर्ता ब्राउज़र बंद कर देता नष्ट हो जाएगा बनाएँ। हम सत्र स्टोरेज ऑब्जेक्ट को यह देखने के लिए देख सकते हैं कि उपयोगकर्ता ने ब्राउज़र बंद कर दिया है या पृष्ठ को रीफ्रेश किया है (सत्र स्टोरेज ऑब्जेक्ट पेज रीफ्रेश पर नष्ट नहीं किया जाएगा)।

+1

इस उत्तर को कोड उदाहरण की आवश्यकता है। क्रोम 56 सत्रस्टोररेज.getItem() में सामान्य रूप से ऑनलाइन लोड श्रोता में काम करता है जब उपयोगकर्ता ब्राउज़र बंद करता है। –

+0

आईई –

0
$(window).bind('unload', function() { 
     if (/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) { 
      console.log('firefox delete'); 
      var data = { async: false }; 
      endSession(data); 
      return null; 
     } 
     else { 
      console.log('NON-firefox delete'); 
      var data = { async: true }; 
      endSession(data); 
      return null; 
     } 
    }); 

    function endSession(data) { 
     var id = 0 

     if (window) { // closeed 
      id=1 
     } 

     $.ajax({ 
      url: '/api/commonAPI/'+id+'?Action=ForceEndSession', 
      type: "get", 
      data: {}, 
      async: data.async, 
      success: function() { 
       console.log('Forced End Session'); 
      } 
     }); 
    } 

अगर (विंडो) बंद या बस पुनः लोड करने के लिए निर्धारित करता है तो इसका उपयोग करें। मेरे लिए काम करना

+0

के पुराने संस्करण पर भी स्थानीय स्टोरेज ऑब्जेक्ट को मेरे लिए काम करता है क्रोम 56 विंडो ऑब्जेक्ट को ऑनलाइन लोड श्रोता में परिभाषित किया जाता है जब उपयोगकर्ता ब्राउज़र बंद करता है –

0

आज मुझे एक ही समस्या थी और एक संभावित समाधान मिला जिसे मैं आपके साथ साझा करना चाहता हूं।

रीफ्रेश और क्लोज़ के बीच समझने में क्या मदद कर सकता है, इस बारे में सोचते हुए कुकीज़ मेरे दिमाग में आईं। मुझे याद है कि बिना किसी स्पष्ट समाप्ति तिथि के कुकी को सेट करना, इसे केवल वर्तमान सत्र के लिए उपलब्ध कराता है। और ब्राउज़र चालू होने तक एक वर्तमान सत्र स्पष्ट रूप से मान्य है। इसमें एक टैब बंद करना शामिल नहीं है, लेकिन मेरी समस्या उपयोगकर्ता प्रमाणीकरण के बारे में थी और मैं केवल एक टैब बंद करने के लिए उपयोगकर्ता को लॉगआउट नहीं करना चाहता था (मुझे लगता है कि ASPXAUTH एएसपी.नेट की कुकी) के समान दृष्टिकोण है।

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

आशा है कि यह दृष्टिकोण किसी और के लिए उपयोगी हो सकता है!

संबंधित मुद्दे