ब्राउज़र बैक बटन का उपयोग करते समय किसी पृष्ठ को पुनः लोड करने के लिए कैसे बाध्य करें?

Question

मुझे किसी तरह यह पता लगाने की आवश्यकता है कि उपयोगकर्ता ने ब्राउजर बैक बटन दबाया है और jquery का उपयोग करके पृष्ठ को रीफ्रेश (सामग्री और सीएसएस को पुनः लोड कर) कर रहा है।

कैसे jquery के माध्यम से इस तरह की कार्रवाई का पता लगाने के लिए?

क्योंकि अभी कुछ तत्वों को पुनः लोड नहीं किया जाता है अगर मैं किसी ब्राउज़र में बैक बटन का उपयोग करता हूं। लेकिन अगर मैं वेबसाइट में लिंक का उपयोग करता हूं तो सब कुछ ताज़ा हो जाता है और सही तरीके से दिखाया जाता है।

जरूरी!

कुछ लोगों ने शायद गलत समझा है कि मुझे क्या चाहिए। मैं वर्तमान पृष्ठ को ताज़ा नहीं करना चाहता। मैं बैक बटन दबाने के बाद लोड किए गए पेज को रीफ्रेश करना चाहता हूं। यहाँ मैं एक और अधिक विस्तृत तरीके से क्या मतलब है:

1. उपयोगकर्ता पृष्ठ 1 पर जा रहा है।
2. पेज 1 पर रहते हुए - वह पेज 2 के लिंक पर क्लिक करता है।
3. वह पृष्ठ 2 पर पुनर्निर्देशित है
4. अब (महत्वपूर्ण भाग!) वह ब्राउज़र में बैक बटन पर क्लिक करता है क्योंकि वह पृष्ठ 1 पर वापस जाना चाहता है
5. वह पृष्ठ 1 पर वापस आ गया है - और अब पृष्ठ 1 को फिर से लोड किया जा रहा है और कुछ को "आप वापस आ गए!"

Comments

सामान्य उपयोगकर्ता व्यवहार को हैक करने के बजाय आप यह समझने की कोशिश क्यों नहीं करते कि आपका कोड पृष्ठ लोड पर काम क्यों नहीं कर रहा है और आपको पुनः लोड करने के लिए पृष्ठ की आवश्यकता है?

— लेलियो फैएटा

@LelioFaieta मैं परिवर्तन दिखाने के लिए कक्षाएं बदलती हैं। यदि उपयोगकर्ता डेटाबेस में मान में परिवर्तन के लिए कुछ पर क्लिक करता है। जब ajax से उदाहरण के लिए किया सीएसएस वर्ग cahnge है onकरने के लिए off। और यह ठीक है, यह डीबी में सहेजा गया है, उपयोगकर्ता सब कुछ सही ढंग से देखते हैं। अब वह किसी अन्य लिंक पर क्लिक करता है। उदाहरण के लिए हमारे बारे में पेज, सही? अब, वह हमारे बारे में पृष्ठ पर है। पिछले पृष्ठ पर वापस जाने का निर्णय लें और ब्राउज़र में बैक बटन पर क्लिक करें। और जब वह वापस आता है, तो वह पृष्ठ पर परिवर्तन देखता है क्योंकि ब्राउज़र ने पेज दिखाया (शायद कुछ ब्राउज़र cahing) इससे पहले कि वह ajax (ऑन / ऑफ क्लासेस) को

— ट्रिगर करे

क्या आप अपने अजाक्स कॉल के लिए प्राप्त या पोस्ट का उपयोग कर रहे हैं?

— Lelio Faieta

@LelioFaieta part2 .. मैं डेटा विशेषता का भी उपयोग करता हूं और इसका कोई प्रभाव नहीं है। यदि पृष्ठ पुनः लोड किया गया तो सब कुछ बहुत अच्छा होगा। यदि मैं उस पृष्ठ पर F5 दबाता हूं तो उसे ajax के माध्यम से बदले गए मान दिखाए गए हैं। मुझे लगता है कि यह कुछ ब्राउज़र से संबंधित समस्या है, जब सीएसएस / html भाग पूरी तरह से लोड नहीं किया गया है। यह केवल F5

— जॉन Doeherskij

@LelioFaieta $.ajax({ url: url, method: 'post', processData: false, contentType: false, cache: false, dataType: 'json', data: formData, })क्या आपको लगता है कि यह ajax द्वारा हो सकता है? अगर ऐसा होता तो बहुत अच्छा होता।

— जॉन डोएर्सकिज

Answer 1

जब आप pageshowइतिहास ट्रैवर्सल के माध्यम से ब्राउज़र को अपने पेज पर लाते हैं तो आप स्थिति को संभालने के लिए घटना का उपयोग कर सकते हैं :

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

ध्यान दें कि HTTP कैश भी शामिल हो सकता है। आपको केवल उन संसाधनों को कैश करने के लिए सर्वर पर उचित कैश संबंधित HTTP हेडर सेट करने की आवश्यकता है जिन्हें कैश करने की आवश्यकता है। आप HTTP कैश को अनदेखा करने के लिए ब्राउज़र को हटाने के लिए मजबूर पुनः लोड भी कर सकते हैं window.location.reload( true ):। लेकिन मुझे नहीं लगता कि यह सबसे अच्छा समाधान है।

अधिक जानकारी के लिए जाँच करें:

• MDN पर BFCache लेख के साथ काम करना
• WebKit Page Cache II - ब्रैडी एयडसन द्वारा अनलोड इवेंट
• MDN पर पेजशो ईवेंट संदर्भ
• अजाक्स, बैक बटन और डोम अपडेट सवाल
• जावास्क्रिप्ट - bfcache / Pageshow घटना - event.persisted हमेशा गलत पर सेट होता है? सवाल

Comments

क्या आप उपयोगकर्ता धीरज की मदद कर सकते हैं वह सही रास्ते पर है लेकिन यह दो बार फिर से लोड हो रहा है। वैसे, मैंने कोशिश की है, window.addEventListener( "unload", function() {} );लेकिन यह कुछ नहीं कर रहा है, पीछे का बटन पहले की तरह काम करता है, जो भी हो, कोई बदलाव नहीं;

— जॉन डोहेर्स्कीज

BFCache कैसे उतारें? क्या आप अधिक विशिष्ट जानकारी के साथ अपना कोड अपडेट कर सकते हैं? यह लाइन window.addEventListener( "unload", function() {} );काम नहीं करती है। क्या यह पूर्ण है?

— जॉन डोएर्सकिज

क्रोम इतिहास ट्रैवर्सल कुछ भ्रामक है। कृपया pageshowसमाधान का प्रयास करें ।

— लियोनिद वासीलेव

मुझे अभी भी एक डबल लोड दिखाई दे रहा है; (एक बार डिफ़ॉल्ट फ़ायरफ़ॉक्स (पुराने पेज को दिखाता है; ब्राउज़र कैश से शायद?) और फिर स्क्रिप्ट फिर से फायर करती है। स्क्रिप्ट इसे उस चरण में पुनः लोड करेगी जो वास्तविक है, लेकिन मैं अभी भी पुरानी स्थिति देख रहा हूं। एक या दूसरे के लिए; (मेरे पास कोड है$(document).ready( function() { /* code here */ });

— जॉन डोहेर्किज

window.performance.navigationपदावनत किया गया है। मेरे द्वारा उपयोग किए गए नेविगेशन प्रकार की जांच करने के लिएwindow.performance.getEntriesByType("navigation")[0].type === "back_forward"

— शून्य ०१ जालफा

Answer 2

यह पोस्ट किए जाने के बाद से कुछ समय हो गया है लेकिन मुझे एक और अधिक सुंदर समाधान मिला है यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता नहीं है।

आप के साथ एक चेक कर सकते हैं

performance.navigation.type

ब्राउज़र समर्थन सहित प्रलेखन यहाँ है: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

इसलिए यह देखने के लिए कि क्या पृष्ठ का उपयोग करके इतिहास से लोड किया गया था, आप कर सकते हैं

if(performance.navigation.type == 2){
   location.reload(true);
}

2इंगित करता है पृष्ठ के इतिहास में नेविगेट करके पहुंचा गया था। अन्य संभावनाएं हैं-

0:पेज को एक लिंक, एक बुकमार्क, एक फॉर्म सबमिशन या एक स्क्रिप्ट, या एड्रेस बार में URL टाइप करके एक्सेस किया गया था।

1:पृष्ठ को पुनः लोड करें बटन पर क्लिक करके या Location.reload () विधि द्वारा पहुँचा जा सकता था।

255: कोई अन्य तरीका

ये यहाँ विस्तृत हैं: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

---

नोट Performance.navigation.type अब के पक्ष में पदावनत किया गया है PerformanceNavigationTiming.type जो रिटर्न 'नेविगेट' / 'पुनः लोड' / 'back_forward' / 'prerender': https://developer.mozilla.org/en-US/docs/Web / एपीआई / PerformanceNavigationTiming / प्रकार

Comments

इस चेक ने मेरे लिए काम किया। 2 का वास्तव में क्या मतलब है?

— रिचीडी

यह एक आकर्षण की तरह काम करता है .. मैंने इसे सबसे अधिक क्षेत्र में रखा है .. और पृष्ठ किसी अन्य स्क्रिप्ट को लोड किए बिना पुनः लोड कर रहा था।

— एनएमथुर

इसने एकदम जादू की तरह काम किया। शानदार खोज ... यह बहुत तेज़ और विश्वसनीय है अन्य उत्तरों की तरह नहीं जो इस की तुलना में धीमे थे। टीआई

— जितिन राज पीआर

यह क्रोम ब्राउज़र के साथ काम करता था और फ़ायरफ़ॉक्स के साथ नहीं था

— प्रवीण वीआर

यह पदावनत किया गया है (देखें w3c.github.io/navigation-timing/#obirect )।

— डेविड विल्हुबर

Answer 3

बस jquery का उपयोग करें:

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

उपरोक्त कार्य 100% तब काम करेगा जब बैक या फॉरवर्ड बटन को अजाक्स का उपयोग करके क्लिक किया गया हो।

यदि ऐसा नहीं होता है, तो स्क्रिप्ट के एक अलग हिस्से में गलत धारणा होनी चाहिए।

उदाहरण के लिए, यह पुनः लोड नहीं हो सकता है यदि पिछली पोस्ट में उदाहरण में से किसी एक का उपयोग किया जाता है window.history.pushState('', null, './');

इसलिए जब आप उपयोग करते हैं history.pushState(); तो सुनिश्चित करें कि आप इसे ठीक से उपयोग करते हैं।

ज्यादातर मामलों में सुझाव जो आपको चाहिए होंगे:

history.pushState(url, '', url); 

कोई window.history ... और सुनिश्चित करें कि url परिभाषित है।

उम्मीद है की वो मदद करदे..

Comments

यह IE में काम नहीं करता है। डेवलपर

— .microsoft.com

@RitchieD - आज तक, यह विंडोज़ 10 पर IE11 में अच्छी तरह से काम करता है। नोट: मैं एज का उपयोग नहीं कर रहा हूं।

— दान जी

सिर्फ "सिर्फ jQuery का उपयोग करें" जवाब का एक प्रशंसक नहीं है, खेद है

— स्टीवन

मैं HTTP कैश का उपयोग करने के लिए "सही" को पुनः लोड से हटा दूंगा। अधिकांश मामलों के लिए परिसंपत्तियों को फिर से लोड करने का कोई मतलब नहीं है।

— कोन्याक

Answer 4

चूंकि performance.navigationअब पदावनत कर दिया गया है, आप यह कोशिश कर सकते हैं:

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

Comments

यह उत्तर तिथि तक सबसे अधिक है

— Java_Man

इस कोड को लियोनिद के उत्तर में दिए गए कोड के साथ जोड़ा जाना चाहिए।

— गोर्विक्स

यह मेरे लिए ठीक काम कर रहा है। मैंने नवीनतम क्रोम, फ़ायरफ़ॉक्स, IE और एज में परीक्षण किया। मैक पर सफारी पर जाँच नहीं की।

— तसव्वर हुसैन

यह एक आकर्षण की तरह काम करता है

— सायरस ज़ी

Answer 5

आपको "नहीं" के मूल्य के साथ, एक ताज़ा संकेतक के रूप में छिपे हुए इनपुट का उपयोग करना चाहिए:

<input type="hidden" id="refresh" value="no">

अब jQuery का उपयोग करके, आप इसके मूल्य की जांच कर सकते हैं:

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

जब आप बैक बटन पर क्लिक करते हैं, तो छिपे हुए फ़ील्ड के मान वैसा ही मूल्य बनाए रखते हैं जब आप मूल रूप से पृष्ठ छोड़ते हैं।

इसलिए जब आप पहली बार पृष्ठ लोड करते हैं, तो इनपुट का मान "नहीं" होगा। जब आप पृष्ठ पर लौटते हैं, तो यह "हाँ" होगा और आपका जावास्क्रिप्ट कोड एक ताज़ा ट्रिगर होगा।

Comments

यह काम नहीं करता है। मैंने फ़ायरफ़ॉक्स और क्रोम प्राप्त किया है और यह काम नहीं कर रहा है।

— जॉन डोएर्सकिज

कृपया, मेरे अपडेट किए गए प्रश्न की जांच करें, शायद आप और अन्य लोगों ने मुझे गलत समझा। यह अब और अधिक स्पष्ट है, जिसे मैं पूरा करना चाहता हूं। धन्यवाद।

— जॉन डोहेर्स्कीज

हाँ, मैं गलत समझा, विस्तार से सवाल अद्यतन करने के लिए धन्यवाद।

— धीरज

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

— जॉन डोहेर्स्कीज

कोई भी नया विचार "डबल लोड" को कैसे ठीक किया जाए?

— जॉन डोएर्सकिज

Answer 6

मेरे लिए समस्या हल करने वाला एक विकल्प पृष्ठ के लिए कैश को अक्षम करना है। ब्राउज़र को कैश्ड संस्करण का उपयोग करने के बजाय सर्वर से पृष्ठ प्राप्त करने के लिए बनाते हैं:

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

Comments

सबसे अच्छा समाधान, लेकिन यहां वह संस्करण है जिसका मैंने उपयोग किया था। Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetMaxAge(TimeSpan.Zero); Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); Response.Cache.SetNoStore();

— उत्साह

Answer 7

वर्तमान में यदि उपयोगकर्ता बैक बटन पर क्लिक करता है तो यह सबसे पुराना तरीका है।

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

स्रोत के लिए यहां देखें

Answer 8

रीलोड करना आसान है। आपको उपयोग करना चाहिए:

location.reload(true);

और वापस पता लगाना है:

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

Comments

काम नहीं कर रहा है; (मैंने alert('test');इसके बजाय कोशिश की है, location.reload(true);लेकिन अभी भी कुछ भी नहीं। मैंने फ़ायरफ़ॉक्स और क्रोम की कोशिश की है, लेकिन कुछ भी नहीं। मैंने तैयार दस्तावेज़ के अंदर की कोशिश की है, बाहर, लेकिन कुछ भी काम नहीं करता है। अगर मैं सरल चेतावनी की कोशिश करता हूं) (या किसी भी jquery कोड tht काम करता है। " मेरे पेज पर बहुत सारे jquery कोड हैं और यह काम करता है।

— John Doeherskij

मैंने उत्तर संपादित किया है, नया समाधान आज़माएं। बात यह है कि आपको पहले राज्य को आगे बढ़ाने की आवश्यकता है, या आपको पॉपस्टैट घटना नहीं मिलेगी।

— एंटोन स्टेपानेनकोव

आपने शायद मुझे गलत समझा है। मैंने अपने प्रश्न को अधिक विस्तृत विवरण के साथ अद्यतन किया है। कृपया, इसे फिर से जांचें यदि आपके पास समय है, तो धन्यवाद।

— जॉन डोएर्सकिज

Answer 9

अपनी html शीर्ष लेख फ़ाइल में मेटा टैग का उपयोग करें, यह मेरे लिए काम करता है।

<meta http-equiv="Pragma" content="no-cache">

Comments

यह पृष्ठ को वापस जाने पर लोड नहीं करता है, जिसे ओपी ने अनुरोध किया था

— टिम्बरमैन

Answer 10

मुझे सबसे अच्छा जवाब मिला और यह मेरे लिए पूरी तरह से काम कर रहा है

बस अपने लिंक में इस सरल स्क्रिप्ट का उपयोग करें

<A HREF="javascript:history.go(0)">next page</A>

या बटन पर क्लिक करें घटना

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

जब आप इसका उपयोग करते हैं, तो आप पहले अपने पृष्ठ को ताज़ा करते हैं और फिर अगले पृष्ठ पर जाते हैं, जब आप वापस लौटते हैं तो यह अंतिम ताज़ा स्थिति होगी।

मैंने इसे CAS लॉगिन में उपयोग किया है और मुझे जो चाहिए वह देता है। आशा है कि इससे सहायता मिलेगी .......

विवरण यहाँ से मिला

Comments

यह मेरे लिए काम नहीं कर रहा है। "0" क्या दर्शाता है?

— विंसेंट