चेक करें कि क्या पृष्ठ जावास्क्रिप्ट में पुनः लोड या रीफ्रेश हो जाता है


184

जब कोई पृष्ठ को रीफ़्रेश करने का प्रयास करता है, तो मैं जांच करना चाहता हूं।

उदाहरण के लिए, जब मैं एक पृष्ठ खोलता हूं तो कुछ भी नहीं होता है लेकिन जब मैं पृष्ठ को ताज़ा करता हूं तो उसे एक चेतावनी प्रदर्शित करनी चाहिए।


1
सर्वर साइड कोड के बिना वास्तव में संभव नहीं है। आपको ये किस लिए चाहिए? हो सकता है अगर आप बड़ी तस्वीर दें तो हम बेहतर विकल्प सुझा सकते हैं।
शैडो विजार्ड कान आपके लिए

हो सकता है कि आप कुकी के साथ ऐसा कर सकते हैं ... जैसे समय को स्टोर करना और फिर से लोड करना समय के अंतर की तुलना करना।
फेलिक्स क्लिंग

मैं बनाना चाहता हूं जैसे कि फेसबुक लिंक # होगा! / कुछ भी मैं # हटाना चाहता हूं! जब पृष्ठ केवल पुनः लोड करें
अहमद

1
@ मुझे शर्म आती है कि मैं भी यही काम कर रहा हूं। नीचे दिए गए किसी भी समाधान ने आपके लिए काम किया?
पॉल फिजराल्ड़

3
⚠️⚠️⚠️ window.performance.navigation.typeपदावनत किया जाता है, pls मेरा जवाब देखें ।
Илья леленько

जवाबों:


219

⚠️⚠️⚠️ window.performance.navigation.typeपदावनत किया जाता है, pls Илья леленько का उत्तर देखें


यह जानने का एक बेहतर तरीका है कि पृष्ठ को वास्तव में पुनः लोड किया गया है, नाविक वस्तु का उपयोग करना है जो कि अधिकांश आधुनिक ब्राउज़रों द्वारा समर्थित है।

यह नेविगेशन टाइमिंग एपीआई का उपयोग करता है

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }

स्रोत: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API


1
धन्यवाद दोस्त यह सटीक समाधान है कि या तो पृष्ठ को सही क्लिक से पुनः लोड किया जाए / ब्राउज़र से ताज़ा किया जाए या यूआरएल द्वारा पुनः लोड किया जाए।
रोके मेजोस

4
जागरूक रहें। क्रोम ने हाल ही में इस व्यवहार को बदल दिया था। जब उपयोगकर्ता करंट एड्रेस बार और हिट एंटर पर क्लिक करता है, तो performance.navigation.type का मान 1 होगा जो 0. होना चाहिए। मैंने संस्करण 56 में परीक्षण किया है। यकीन नहीं होता क्यों।
जैकविन ने

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

26
performance.navigation.type == performance.navigation.TYPE_RELOADके बजाय पढ़ने के लिए आसान है == 1। इसके अलावा, अगर आप performance.navigationTYPE_BACK_FORWARDTYPE_NAVIGATE
जांचेंगे

5
⚠️⚠️⚠️ window.performance.navigation.typeपदावनत किया जाता है, pls मेरा जवाब देखें ।
Илья леленько

37

जाँच करने के लिए पहला कदम है sessionStorage कुछ पूर्व-परिभाषित मूल्य की जांच करना है और अगर यह सतर्क उपयोगकर्ता मौजूद है:

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

दूसरा चरण sessionStorageकुछ मूल्य पर सेट करना है (उदाहरण के लिएtrue ):

sessionStorage.setItem("is_reloaded", true);

जब तक पृष्ठ बंद नहीं किया जाता तब तक सत्र मान रखा जाता है, तो यह तभी काम करेगा जब पृष्ठ को साइट के साथ एक नए टैब में पुनः लोड किया जाए। आप पुनः लोड गणना को भी उसी तरह रख सकते हैं।


28
दो बातों की जानकारी होना: 1)। आप केवल सत्र और स्थानीय संग्रहण में स्ट्रिंग मान संग्रहीत कर सकते हैं। इसलिए trueमें परिवर्तित किया जाता है "true"। 2)। जब तक उपयोगकर्ता ब्राउज़र विंडो को बंद नहीं करता तब तक सेशन स्टोरेज बना रहता है, इसलिए आप उसी ब्राउज़र सत्र के भीतर पेज रीलोड और नेविगेट करने से और आपके द्वारा साइट पर वापस जाने के बीच का अंतर नहीं बता सकते।
हेक्टर

35

नया मानक 2018-now (प्रदर्शनताकरण)

window.performance.navigationसंपत्ति है पदावनत में नेविगेशन समय स्तर 2 विनिर्देश। कृपया का उपयोग करेंPerformanceNavigationTiming इसके बजाय इंटरफ़ेस का ।

PerformanceNavigationTiming.type

यह एक प्रायोगिक तकनीक है

चेक ब्राउज़र संगतता तालिका ध्यान से उत्पादन में इस उपयोग करने से पहले।

2019-07-08 पर समर्थन

टाइप-ओनली प्रॉपर्टी नेविगेशन के प्रकार का प्रतिनिधित्व करने वाली स्ट्रिंग लौटाती है। मान निम्न में से एक होना चाहिए:

  • नेविगेट - नेविगेशन एक लिंक पर क्लिक करके, ब्राउज़र के एड्रेस बार में URL दर्ज करके, फॉर्म सबमिट करना, या फिर नीचे सूचीबद्ध के रूप में पुनः लोड और back_forward के अलावा किसी स्क्रिप्ट ऑपरेशन के माध्यम से प्रारंभ करना शुरू किया।

  • पुनः लोड - नेविगेशन ब्राउज़र के पुनः लोड ऑपरेशन के माध्यम से या है location.reload()

  • back_forward - नेविगेशन ब्राउज़र के इतिहास ट्रैवर्सल ऑपरेशन के माध्यम से होता है।

  • prerender - नेविगेशन की शुरुआत एक prerender hint द्वारा की जाती है ।

यह संपत्ति केवल रीड है।

निम्न उदाहरण इस संपत्ति के उपयोग को दर्शाता है।

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}


14

पहली बार किसी ने पृष्ठ पर आने के लिए कुकी स्टोर करें। ताज़ा जाँच पर कि क्या आपका कुकी मौजूद है और यदि यह है, तो अलर्ट करें।

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

और आपके शरीर टैग में:

<body onload="checkFirstVisit()">

9
उपयोगकर्ताओं को वापस करने के बारे में क्या?
रेड टैज

5
जैसे @ Rob2211 कहता है कि यह केवल जाँच करता है कि पृष्ठ का दौरा किया गया है और जब तक कुकी अभी जीवित है तब तक पृष्ठ को फिर से दिखाने पर एक झूठी सकारात्मक दे सकता है। रिफ्रेश चेक करने के लिए इसका इस्तेमाल न करें।
ब्रैनोवेन

@Brannon - कुकी बिना किसी एक्सपायर वैल्यू के बनाई गई है और ब्राउजर बंद होने पर नष्ट हो जाएगी।
Techfoobar

1
@techfoobar अच्छा कैच। यदि उपयोगकर्ता कुकी को नष्ट करने से पहले साइट को फिर से जारी करता है तो क्या यह अभी भी एक समस्या पैदा नहीं करेगा?
Brannon

3
@ ब्रैनॉन - हां, अगर ब्राउज़र खुला छोड़ दिया जाता है और उपयोगकर्ता कुछ समय बाद फिर से जाता है, तो इसे नई यात्रा नहीं माना जाएगा।
techfoobar

7

अगर

event.currentTarget.performance.navigation.type

रिटर्न

0 => उपयोगकर्ता ने केवल एक यूआरएल टाइप किया
= 1> पृष्ठ पुनः लोड
2 => बैक बटन पर क्लिक किया।


मुझे यह त्रुटि मिली, क्या आप इसे और अधिक समझा सकते हैं?
अन टाइप किए गए टाइपर:

2 => TYPE_BACK_FORWARD पृष्ठ को इतिहास में नेविगेट करके पहुँचा गया था। developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
टियागो फ्रीटास लील

performance.navigation.typeपदावनत किया जाता है, pls मेरा जवाब देखें ।
Илья Иеленько

6

मुझे यहाँ कुछ जानकारी मिली, जावास्क्रिप्ट डिटेक्टिंग पेज रिफ्रेश । उनकी पहली सिफारिश छिपे हुए क्षेत्रों का उपयोग कर रही है, जो पेज रिफ्रेश के माध्यम से संग्रहीत किए जाते हैं।

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}
<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>


हम Refererसंपत्ति की जांच करके भी देख सकते हैं और इस संपत्ति के आधार पर सर्वर प्रतिक्रिया को संशोधित कर सकते हैं
आदिल

साइड नोट: उस पृष्ठ पर सूचीबद्ध पहला तरीका विफल हो जाएगा क्योंकि DOM को पार्स करने से पहले कोड निष्पादित हो रहा है। <script>तत्व को नीचे तक ले जाने से काम चल जाएगा - लेकिन यह अभी भी एक गारंटीकृत समाधान नहीं है (और न ही कुकी विधि है)।
एंडी ई

1
@ एडेल: चेकिंग Refererविश्वसनीय नहीं है; कई प्रॉक्सी और ब्राउज़र एक्सटेंशन इसे अनुरोधों से अलग करते हैं।
एंडी ई

@VoronoiPotato कृपया केवल एक लिंक पोस्ट करने के बजाय सूचना को संक्षेप में प्रस्तुत करने का प्रयास करें।
डालिन

1
मेरे लिए, यह हमेशा "निष्पादित करता है" यदि "स्थिति और कभी निष्पादित नहीं करता है" और "भाग", इससे कोई फर्क नहीं पड़ता कि मैंने पेज लोड किया या पृष्ठ ताज़ा किया।
पार्थ वोरा

6

मैंने एक ही समय में पुराने window.performance.navigationऔर नए दोनों तरीकों का उपयोग करने के लिए इस फ़ंक्शन को लिखा है performance.getEntriesByType("navigation"):

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

परिणाम विवरण:

0: एक लिंक पर क्लिक करके, ब्राउज़र के एड्रेस बार में URL दर्ज करना, फॉर्म सबमिट करना, बुकमार्क पर क्लिक करना, स्क्रिप्ट ऑपरेशन के माध्यम से आरंभ करना।

1: Reload बटन पर क्लिक करना या उपयोग करनाLocation.reload()

2: ब्रॉशर इतिहास (बाक और फारवर्ड) के साथ काम करना।

3: पूर्ववर्ती गतिविधि की तरह<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: किसी भी अन्य विधि।


1

मुझे यहाँ कुछ जानकारी मिली, जावास्क्रिप्ट डिटेक्टिंग पेज रिफ्रेश

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;

3
कहाँ हे यहाँ" ? क्या आप लिंक भूल गए?

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