विंडो कोड या पृष्ठ ताज़ा करने पर जावास्क्रिप्ट कोड चलाएं?


110

क्या कोई अंतिम जावास्क्रिप्ट कोड चलाने का एक तरीका है जब कोई उपयोगकर्ता ब्राउज़र विंडो बंद करता है या पृष्ठ को ताज़ा करता है?

मैं onload के समान कुछ सोच रहा हूँ, लेकिन अधिक onclose की तरह? धन्यवाद।

मुझे onbeforeunload का तरीका पसंद नहीं है, जो हमेशा एक पुष्टिकरण बॉक्स को पॉप अप करता है (पृष्ठ छोड़ें / मोज़िला पर रहें) या (पुनः लोड / क्रोम पर पुनः लोड न करें)। क्या चुपचाप कोड निष्पादित करने का एक तरीका है?


1
संभावित डुप्लिकेट: stackoverflow.com/questions/805463/…
1.44mb

संभावित डुप्लिकेट: stackoverflow.com/questions/1631959/browser-window-close-event
होरन

18
प्रतीक्षा करें- यह वास्तव में एक डुप्लिकेट नहीं है ... वह जानना चाहता है कि उपयोगकर्ता के लिए एक संकेत के बिना किसी चीज़ को कैसे निष्पादित किया जाए - जुड़े हुए प्रश्न विपरीत पूछते हैं ...
फिडेव

जवाबों:


84

दोनों window.onbeforeunloadऔर है window.onunload, जो ब्राउज़र के आधार पर अलग-अलग उपयोग किए जाते हैं। आप उन्हें या तो विंडो प्रॉपर्टीज को फंक्शन्स में सेट करके, या इस्तेमाल करके उन्हें असिस्ट कर सकते हैं .addEventListener:

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

आमतौर पर, onbeforeunloadउपयोग किया जाता है यदि आपको उपयोगकर्ता को पृष्ठ छोड़ने से रोकने की आवश्यकता होती है (उदाहरण के लिए उपयोगकर्ता कुछ बिना सहेजे गए डेटा पर काम कर रहा है, इसलिए उसे छोड़ने से पहले बचाना चाहिए)। ओपेराonunload द्वारा समर्थित नहीं है , जहाँ तक मुझे पता है, लेकिन आप हमेशा दोनों को सेट कर सकते हैं।


इसने मेरे लिए काम किया: फ़ायरफ़ॉक्स (69.0.2) और क्रोम (77.0.3865.90)
FelipeCaparelli

51

ठीक है, मुझे इसके लिए एक काम करने वाला समाधान मिला, इसमें beforeunloadघटना का उपयोग करना और फिर हैंडलर वापसी करना शामिल है null। यह पुष्टिकरण बॉक्स पॉपिंग-अप के बिना वांछित कोड निष्पादित करता है। यह कुछ इस तरह चलता है:

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

उम्मीद है की यह मदद करेगा।


10
क्या यह तब भी निकाल दिया जाता है जब बाहर नेविगेट करना और ताज़ा करना (F5)? यदि हां, तो यह वास्तव में प्रश्न को संबोधित नहीं करता है ...
जागो

1
परीक्षण नहीं किया गया है, लेकिन मुझे लगता return false;है कि ऐसा ही होता है (यानी डिफ़ॉल्ट व्यवहार को रोकता है) और यह शब्दार्थ से अधिक सही है।
Collimarco

1
झूठे को फिर भी डायलॉग बॉक्स पॉप अप करके पूछेगा कि आप पेज छोड़ना चाहते हैं या नहीं। मैंने एक एंकर पर इसका परीक्षण किया। वापसी के साथ डायलॉग पॉप नहीं हुआ, लेकिन फिर भी इसने सांत्वना दी।
रिकी

20

कभी-कभी आप सर्वर को यह बताना चाहते हैं कि उपयोगकर्ता पृष्ठ छोड़ रहा है। यह उपयोगी है, उदाहरण के लिए, सर्वर पर अस्थायी रूप से संग्रहीत सहेजे न गए चित्रों को साफ करने के लिए, उस उपयोगकर्ता को "ऑफ़लाइन" के रूप में चिह्नित करने के लिए, या जब वे अपना सत्र पूरा करने के लिए लॉग इन करें।

ऐतिहासिक रूप से, आप beforeunloadफ़ंक्शन में AJAX अनुरोध भेजेंगे , हालांकि इसमें दो समस्याएं हैं। यदि आप एक अतुल्यकालिक अनुरोध भेजते हैं, तो इस बात की कोई गारंटी नहीं है कि अनुरोध सही तरीके से निष्पादित किया जाएगा। यदि आप एक तुल्यकालिक अनुरोध भेजते हैं, तो यह अधिक विश्वसनीय है, लेकिन अनुरोध समाप्त होने तक ब्राउज़र लटका रहेगा। यदि यह एक धीमी गति से अनुरोध है, तो यह उपयोगकर्ता के लिए एक बड़ी असुविधा होगी।

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

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()में समर्थित है:

  • धार १४
  • फ़ायरफ़ॉक्स ३१
  • क्रोम 39
  • सफारी 11.1
  • ओपेरा 26
  • iOS सफारी 11.4

यह वर्तमान में समर्थित नहीं है:

  • इंटरनेट एक्स्प्लोरर
  • ओपेरा मिनी

यदि आपको असमर्थित ब्राउज़रों के लिए समर्थन जोड़ने की आवश्यकता है, तो यहां sendBeacon () के लिए एक पॉलीफ़िल है। यदि विधि ब्राउज़र में उपलब्ध नहीं है, तो इसके बजाय एक तुल्यकालिक AJAX अनुरोध भेजेगा।


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

@Peter मैं पूर्णता के लिए इसे शामिल कर रहा था, लेकिन मैंने इसे हटा दिया।
माइक

@ माइक, कृपया, अपना उत्तर न हटाएँ। यह न केवल चयनित सर्वश्रेष्ठ उत्तर (यह तुम्हारा होना चाहिए) को पूरा करता है, बल्कि खिड़की से बाहर निकलने या बंद करने के लिए उपयोग की जाने वाली घटना को भी प्रस्तुत करता है
एलेक्स 8752

@ Alex8752 मैंने अपना उत्तर नहीं हटाया, मैंने इसके एक हिस्से को संपादित किया जो प्रश्न के लिए अप्रासंगिक था, जिसे आप यहाँ देख सकते हैं
माइक

1
@AshokKumar आपके द्वारा सर्वर पर भेजे जाने वाले नियंत्रण में हैं। यदि आप GET द्वारा चीजें भेजना चाहते हैं, तो ऐसा कुछ भी नहीं है जो आपको आपके अनुरोध को कुछ भेजने से रोकता है, जैसे कि http://example.com/script.php?token=something&var1=val1&var2=val2उन मूल्यों को GET में डालना।
माइक

14

jQuery संस्करण:

$(window).unload(function(){
    // Do Something
});

अपडेट : jQuery 3:

$(window).on("unload", function(e) {
    // Do Something
});

धन्यवाद गैरेट


8

दस्तावेज़ यहाँ onbeforeunload घटना को सुनने और / या खिड़की पर एक घटना श्रोता जोड़ने को प्रोत्साहित करता है।

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

आप केवल एक फ़ंक्शन या फ़ंक्शन संदर्भ के साथ विंडो के .onunload या .onbeforeunload गुणों को भी पॉप्युलेट कर सकते हैं।

हालाँकि व्यवहार को सभी ब्राउज़रों में मानकीकृत नहीं किया गया है, फ़ंक्शन उस मान को लौटा सकता है जो पृष्ठ को छोड़ने की पुष्टि करते समय ब्राउज़र प्रदर्शित करेगा।



3

ईवेंट कहा जाता है beforeunload, इसलिए आप किसी फ़ंक्शन को असाइन कर सकते हैं window.onbeforeunload


-2

आप कुछ इस तरह की कोशिश कर सकते हैं:

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">

23
खबरदार, प्राचीन समय में इसे पढ़ने वाले लोग - यह प्राचीन JS और HTML है और यहाँ अन्य सुझाव बेहतर हैं।
रैंडर्स ००
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.