JQuery / जावास्क्रिप्ट का उपयोग करके पेज रिफ्रेश के किसी भी रूप को रोकें


93

एक बार जब उपयोगकर्ता मेरे पृष्ठ पर होता है, तो मैं नहीं चाहता कि वह पृष्ठ को ताज़ा करे।

  1. कभी भी, उपयोगकर्ता हिट F5या शीर्ष पर ताज़ा करें बटन। उसे एक चेतावनी कहनी चाहिए

    आप पृष्ठ को ताज़ा नहीं कर सकते।

  2. इसके अलावा, यदि उपयोगकर्ता एक नया टैब खोलता है और प्रचलित टैब में उसी यूआरएल को एक्सेस करने का प्रयास करता है तो उसे अलर्ट प्राप्त करना चाहिए

    आप एक ही पृष्ठ को 2 टैब में नहीं खोल सकते

वैसे भी मैं यह जावास्क्रिप्ट या jQuery का उपयोग कर सकते हैं? बिंदु एक वास्तव में महत्वपूर्ण है।


आप ब्रॉडकास्ट चैनल API ( developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API ) का उपयोग करके पता लगा सकते हैं और टैब के बीच संवाद स्थापित करने के लिए संदेश भेज सकते हैं। THUS, इसका उपयोग करके आप समान url और ब्लॉक अन्य टैब के साथ कई टैब का पता लगा सकते हैं।
aeXuser264

जवाबों:


195

# 1 के माध्यम से लागू किया जा सकता है window.onbeforeunload

उदाहरण के लिए:

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
</script>

उपयोगकर्ता को संदेश के साथ संकेत दिया जाएगा, और पृष्ठ पर रहने या अपने रास्ते पर जारी रखने का विकल्प दिया जाएगा। यह आम होता जा रहा है। यदि आप पोस्ट लिखते समय पेज से दूर नेविगेट करने का प्रयास करते हैं तो स्टैक ओवरफ्लो ऐसा करता है। आप उपयोगकर्ता को फिर से लोड करने से पूरी तरह से रोक नहीं सकते हैं, लेकिन यदि वे ऐसा करते हैं तो आप इसे वास्तविक डरावना बना सकते हैं।

# 2 कम या ज्यादा असंभव है। यहां तक ​​कि अगर आप सत्र और उपयोगकर्ता लॉगिन ट्रैक करते हैं, तो भी आप यह गारंटी नहीं दे पाएंगे कि आप दूसरे टैब को सही तरीके से पहचान रहे हैं। उदाहरण के लिए, शायद मेरे पास एक खिड़की खुली है, फिर इसे बंद करें। अब मैंने एक नई विंडो खोली। आप संभवतः दूसरे टैब के रूप में यह पता लगाएंगे कि भले ही मैंने पहले वाले को पहले ही बंद कर दिया हो। अब आपका उपयोगकर्ता पहली विंडो तक नहीं पहुँच सकता क्योंकि उन्होंने इसे बंद कर दिया था, और वे दूसरी विंडो तक नहीं पहुँच सकते क्योंकि आप उन्हें अस्वीकार कर रहे हैं।

वास्तव में, मेरे बैंक का ऑनलाइन सिस्टम # 2 करने के लिए वास्तविक प्रयास करता है, और ऊपर वर्णित स्थिति हर समय होती है। जब तक मैं बैंकिंग प्रणाली का फिर से उपयोग कर सकता हूं, तब तक मुझे आमतौर पर इंतजार करना होगा।


1
बस ध्यान दें कि ओपरेफॉन्लोड घटना ओपेरा ब्राउज़र के संस्करणों में उपलब्ध नहीं है।
विली कॉर्नब्रेड 17

1
यदि उपयोगकर्ता पृष्ठ पर बने रहने का विकल्प चुनता है तो क्या कुछ करने का कोई तरीका है।
ऋषिपोह

5
क्या मेरे लिए ट्रिक है, हालाँकि आपको इसके बजाय window.addEventListener ( developer.mozilla.org/en-US/docs/Web/Events/beforeunload ) का उपयोग करना चाहिए , क्रॉस-ब्राउज़र अनुकूलता के लिए और समस्याओं को रोकने के लिए।
जूलियन बेरुबे

मुझे पता है कि यह सवाल पुराना है, लेकिन, अगर वे वास्तव में कई सत्रों को रोकना चाहते हैं , तो क्या वे वेब पॉकेट का उपयोग कर सकते हैं?
मेघन

1
@ सीन - हाँ ... यदि आप वास्तव में कई सत्रों को रोकना चाहते थे। एक WebSocket स्टेटफुल, बिडायरेक्शनल कम्युनिकेशन कर सकता है। क्लाइंट (शायद) वेबसकेट कनेक्ट होने के दौरान अचानक किसी और के लिए नहीं जा रहा है, इसलिए आपको उस उपयोगकर्ता को एक टोकन असाइन करने में सक्षम होना चाहिए, और सॉकेट बंद होने के बाद इसे साफ़ करना चाहिए। लेकिन, यह उपयोगकर्ता एजेंट के अपेक्षित व्यवहार के आसपास हैकिंग कर रहा है, इसलिए यह संभवतः बुरा है। मैं बहुत कम मामलों के बारे में सोच सकता हूं, जहां कुछ इस तरह उचित होगा (शायद एक ऑनलाइन गेम - किसी को दो स्तर 37 मौत के पंजे के रूप में प्रवेश करने से रोकने के लिए ...)।
सेठ

34

आप उपयोगकर्ता को ताज़ा करने से नहीं रोक सकते, और न ही आपको वास्तव में प्रयास करना चाहिए। आपको वापस क्यों जाना चाहिए आपको इस समाधान की आवश्यकता , यहां मूल समस्या क्या है? वहाँ से शुरू करें और समस्या को हल करने के बारे में जाने का एक अलग तरीका खोजें। शायद आप इस बारे में विस्तृत हैं कि आपको क्यों लगता है कि आपको ऐसा करने की आवश्यकता है जो इस तरह के समाधान को खोजने में मदद करेगा।

मौलिक ब्राउज़र सुविधाओं को तोड़ना एक अच्छा विचार नहीं है, इंटरनेट का 99.999999999% से अधिक काम करता है और F5 के साथ ताज़ा होता है, यह उपयोगकर्ता की एक उम्मीद है, जिसे आपको नहीं तोड़ना चाहिए।


समस्या यह है, कि पेज एक साइबेल एप्लिकेशन है। और जब कोई उपयोगकर्ता एक सत्र में होता है और ताज़ा करता है, तो एक नया सत्र बन जाता है, और ऐप क्रैश हो जाता है। इसलिए मुझे उपयोगकर्ता को ताज़ा करने में सक्षम नहीं होना चाहिए।
पंकज

20
@ पंकज - जिसे एप्लिकेशन साइट पर तय किया जाना चाहिए, और उदाहरण के लिए कुकीज़ ताकि उपयोगकर्ता सत्र को टैब में साझा करे।
निक Craver

9
मुझे यकीन नहीं है कि आप यहाँ कहाँ से आ रहे हैं। इंटरनेट पर अनगिनत साइटें एक ब्राउज़र रीफ़्रेश होने से रोकती हैं यदि आपके पास एक ऐसा फॉर्म है जो गंदा है, तो आपको इस तथ्य से सावधान रहना चाहिए कि आप अपने परिवर्तनों को खो सकते हैं। निश्चित नहीं कि यह "मूलभूत ब्राउज़र सुविधाओं को तोड़ना" क्यों है।
सिरारिस

1
@ सिरिस: बिल्कुल। इसके अलावा, मैं एक निजी एप्लिकेशन बना रहा हूं जिसे उपयोगकर्ता अपने निजी नेटवर्क में नहीं होने पर भी उपयोग करने में सक्षम होना चाहिए। इसलिए मैं ऑफ़लाइन उपयोग के लिए ब्राउज़र स्टोरेज में सब कुछ स्टोर करता हूं, लेकिन यदि वह पृष्ठ को फिर से लोड करता है, तो पूरा एप्लिकेशन चला गया है। यह बहुत "सामान्य" नहीं हो सकता है, लेकिन इस आधुनिक आईटी दुनिया में यह अधिक से अधिक हो जाएगा।
cslotty

16

यद्यपि यह F5 कुंजी को अक्षम करने के लिए एक अच्छा विचार नहीं है, आप इसे नीचे JQuery में कर सकते हैं।

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
     $(document).on("keydown", disableF5);
});
</script>

आशा है कि यह मदद करेगा!


27
OSX के बारे में क्या है, जहां यह CMD + R है? या मोबाइल जहां प्रेस करने के लिए एक बटन है? मैं इसे एक समाधान के रूप में नहीं देखता हूं
इटलीपेल एले

14

सीजीआई के ओले दिनों में हमारे पास कई रूप थे जो विभिन्न बैकएंड क्रियाओं को ट्रिगर करते थे। जैसे समूहों को टेक्स्ट नोटिफिकेशन, प्रिंट जॉब, डेटा की खेती आदि।

यदि उपयोगकर्ता एक पृष्ठ पर था जो कह रहा था "कृपया प्रतीक्षा करें ... कुछ बड़ा काम कर रहा है जो कुछ समय ले सकता है।"। वे REFRESH को हिट करने की अधिक संभावना रखते थे और यह BAD होगा!

क्यों? क्योंकि यह अधिक धीमी नौकरियों को ट्रिगर करेगा और अंततः पूरी बात को काट देगा।

समाधान? उन्हें अपना फॉर्म करने की अनुमति दें। जब वे अपना फॉर्म जमा करते हैं ... अपना काम शुरू करें और फिर उन्हें दूसरे पृष्ठ पर निर्देशित करें जो उन्हें प्रतीक्षा करने के लिए कहता है।

जहाँ बीच के पृष्ठ में वास्तव में फॉर्म डेटा होता था जो कि काम शुरू करने के लिए आवश्यक था। WAIT पृष्ठ में एक जावास्क्रिप्ट इतिहास नष्ट होता है। इसलिए वे उस वेट पेज को RELOAD कर सकते हैं जो वे चाहते हैं और यह मूल कार्य को पृष्ठभूमि में शुरू करने के लिए ट्रिगर नहीं करेगा क्योंकि WAIT पेज में केवल WAIT के लिए आवश्यक फ़ॉर्म डेटा शामिल है।

आशा है कि समझ में आता है।

इतिहास को नष्ट करने के समारोह ने उन्हें BACK पर क्लिक करने और फिर ताज़ा करने से भी रोका।

यह बहुत सहज था और गैर-लाभकारी घाव होने तक MANY MANY वर्षों तक काम किया।

उदाहरण: FORM ENTRY - उनकी सभी जानकारी एकत्र करें और सबमिट करने पर, यह आपके बैकएंड जॉब को ट्रिगर करता है।

प्रपत्र प्रविष्टि से परिणाम - रिटर्न HTML जो आपके स्थिर प्रतीक्षा पृष्ठ और / या POST / GET को एक अन्य रूप (WAIT पृष्ठ) पर पुनर्निर्देशित करता है।

WAIT PAGE - केवल नवीनतम पृष्ठ को नष्ट करने के लिए प्रतीक्षा पृष्ठ से संबंधित डेटा के साथ-साथ जावास्क्रिप्ट भी शामिल है। जैसे (-1 या -2) केवल सबसे हाल के पृष्ठों को नष्ट करने के लिए, लेकिन फिर भी उन्हें अपने मूल FORM प्रवेश पृष्ठ पर वापस जाने की अनुमति देता है।

एक बार जब वे आपके WAIT पृष्ठ पर होते हैं, तो वे REFRESH पर क्लिक कर सकते हैं जितना वे चाहते हैं और यह बैकेंड पर मूल FORM की नौकरी को कभी नहीं छोड़ेगा। इसके बजाय, आपके WAIT पेज को एक मेटा टाइमिंग रिफ्रेश ही अपनाना चाहिए ताकि यह हमेशा उनकी नौकरी की स्थिति की जांच कर सके। जब उनकी नौकरी पूरी हो जाती है, तो उन्हें आपकी इच्छा के अनुसार प्रतीक्षा पृष्ठ से दूर भेज दिया जाता है।

यदि वे मैन्युअल रूप से REFRESH करते हैं ... वे बस अपनी नौकरी की स्थिति के एक और चेक को वहां जोड़ रहे हैं।

उम्मीद है की वो मदद करदे। सौभाग्य।


2
आपको इस अद्भुत और जानकारीपूर्ण उत्तर के लिए पर्याप्त क्रेडिट नहीं मिला। धन्यवाद!!
शाइनिंगलाइट

5

नहीं, वहाँ नहीं है।

मुझे पूरा यकीन है कि जेएस से रिफ्रेश बटन पर क्लिक को रोकने का कोई तरीका नहीं है, और यहां तक ​​कि अगर था, तो जेएस को बंद किया जा सकता है।

आपको शायद अपने एक्स (रिफ्रेशिंग को रोकना) से वापस कदम रखना चाहिए और वाई (जो कुछ भी हो सकता है) का एक अलग समाधान ढूंढना चाहिए।


2

नंबर (2) प्रत्येक सत्र के लिए कस्टम हार्टबीट के साथ सॉकेट कार्यान्वयन (जैसे वेबसोकेट, सॉकेट.आईओ, इत्यादि) का उपयोग करके संभव है, जो उपयोगकर्ता में लगा हुआ है। यदि कोई उपयोगकर्ता किसी अन्य विंडो को खोलने का प्रयास करता है, तो आपके पास एक जावास्क्रिप्ट हैंडलर चेक है। सर्वर के साथ अगर यह ठीक है, और फिर एक त्रुटि संदेश के साथ जवाब दें।

हालाँकि, एक बेहतर समाधान यह है कि दो सत्रों को गूगल डॉक्स की तरह समकालिक किया जाए।


2

समस्या # 2 अब BroadcastAPI का उपयोग करके हल किया जा सकता है ।

फिलहाल यह केवल क्रोम, फायरफॉक्स और ओपेरा में उपलब्ध है।

var bc = new BroadcastChannel('test_channel');

bc.onmessage = function (ev) { 
    if(ev.data && ev.data.url===window.location.href){
       alert('You cannot open the same page in 2 tabs');
    }
}

bc.postMessage(window.location.href);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.