जब बैक बटन पॉपस्टेट ट्रिगर करता है तो मैं पेज को रीफ्रेश कैसे रोक सकता हूं?

Question

मैं बिना किसी रीलोड के अपने पृष्ठ में सामग्री को संशोधित करने का प्रयास कर रहा हूं। वर्तमान में मेरे कोड पढ़ता है:

window.onpopstate = function(event){ 
    // Ajax Request the Page and replace content with new content 
}; 

यह काम करता है जब मैं धक्का एक राज्य तो popstate घटना ट्रिगर, लेकिन अगर मैं ब्राउज़र में वापस बटन दबाएँ यह बजाय मेरी onpopstate घटना बुलाने की यूआरएल पर नेविगेट। मैं पेज को रीफ्रेश कैसे कर सकता हूं और पेज को अपने AJAX कॉल के साथ अपडेट कर सकता हूं?

संपादित करें: मैं पुशस्टेट और पॉपस्टेट के साथ अपडेट करने का प्रयास कर रहा हूं। मैं अपने यूआरएल हैश मुक्त रखने की उम्मीद कर रहा था।

Answer 1

जैसे कुछ बात कर सकते हैं आप ' बैक बटन को पृष्ठ लोड करने से रोकने के लिए इतिहास पर वर्तमान पृष्ठ से धक्का दिया है।

यदि आप अपने वेब ऐप में उपयोगकर्ता को "निहित" रखने की कोशिश कर रहे हैं तो बैक बटन हमेशा किसी प्रकार का फ़ंक्शन प्रदान करता है, आपको कम से कम दो राज्यों को ढेर पर धक्का देना होगा और फिर किसी अन्य स्थिति को धक्का देना सुनिश्चित करें अपने popstate हैंडलर से।

var foo = {foo: true}; // state object 
history.pushState(foo, "unused argument", "#newInitialUri"); 
... 
var bar = {bar: true} 
history.pushState(bar, "unused argument", "#newStateOfWebApp"); 
... 
window.onpopstate = function(event){ 
    ... 
    var baz = {baz: true} 
    history.pushState(baz, "unused argument", "#baseState"); 
}; 

उपरोक्त उदाहरण में हम कहते हैं कि '/' लोड किया गया है। स्क्रिप्ट निष्पादन शुरू हो जाती है और ब्राउज़र विंडो यूआरआई '/ # newInitialUri' में बदल जाती है लेकिन कोई पृष्ठ लोड नहीं होता है। फिर तुरंत बाद, ब्राउज़र यूआरआई '/ # newStateOfWebApp' में बदल जाता है और कोई पृष्ठ लोड नहीं होता है।

उपयोगकर्ता अपने ब्राउज़र पर बैक बटन दबाता है। आपका पॉपस्टेट हैंडलर आग लगाता है। आपके हैंडलर के दौरान, event.state foo के बराबर है और ब्राउज़र यूरी '/ # newInitialUri' है। कोई पेज लोड नहीं होता है। हैंडलर पूरा करने को पूरा करता है, इतिहास.pushState को कॉल करता है और अब ब्राउजर यूरी '/ # बेसस्टेट' है। कोई पेज लोड नहीं होता है। यदि उपयोगकर्ता दोबारा क्लिक करता है, तो आपकी पॉपस्टेट घटना फिर से आग लग जाएगी, event.state foo (दोबारा) के बराबर होगा, ब्राउज़र यूरी '/ # newInitialUri' (कोई पेज लोड नहीं होगा) और फिर यह '/ # बेसस्टेट' होगा (कोई पेज लोड नहीं)।

यह ध्यान रखना होगा कि आपके popstate हैंडलर में event.state हमेशा यूआरआई के लिए राज्य वस्तु शामिल तुम सिर्फ , एक नहीं तुम सिर्फ से आया पर वापस आएँ है। यह पहली बार मुझे भ्रमित कर रहा था, लेकिन जब मैंने इसके बारे में सोचा तो समझ में आया। उदाहरण के लिए, उपयोगकर्ता शायद Google पर जाने के बाद आपके पृष्ठ पर वापस आ सकता है। राज्य वस्तु आपके ऐप की स्थिति को आपके कोड में संवाद करने का अवसर है।

ध्यान रखें कि कुछ ब्राउज़र पृष्ठ लोड पर पॉपस्टेट ईवेंट को आग लगाते हैं (जो मेरी समझ से spec के अनुसार होता है)। यह सुनिश्चित करने के लिए कि आप उस कोड को नहीं चलाते हैं, जिसे आप पृष्ठ लोड पर नहीं लेना चाहते हैं, अपने कोड को निष्पादित करने से पहले अपने हैंडलर में अपने राज्य ऑब्जेक्ट की जांच करना सुनिश्चित करें।

एक अंतिम नोट: यदि आप ईवेंट को संभालने के लिए jQuery का उपयोग कर रहे हैं, तो आपको राज्य ऑब्जेक्ट को संदर्भित करने के लिए event.originalEvent.state का उपयोग करना होगा।

Answer 2

This मदद मिल सकती है

unload घटना खिड़की तत्व को भेजा जाता है जब उपयोगकर्ता पेज से चला। इसका मतलब कई चीजों में से एक हो सकता है। उपयोगकर्ता पृष्ठ छोड़ने के लिए एक लिंक पर क्लिक कर सकता था, या पता बार में एक नए यूआरएल में टाइप किया गया था। आगे और पीछे बटन ईवेंट ट्रिगर करेंगे। ब्राउज़र विंडो को बंद करने से ईवेंट ट्रिगर हो जाएगा। यहां तक ​​कि एक पृष्ठ रीलोड पहले भी एक अनलोड ईवेंट बना देगा।

संदर्भ

http://api.jquery.com/unload/

अपरीक्षित

$(window).unload(function(e){  
     e.preventDefault(); 
     $(window).trigger('popstate ');  

    });  

    $(window).bind('popstate ',function(){ 

    //your ajax call here 
    }); 

और अंत में यहाँ ब्राउज़र के वापस बटन पर एक DEMO क्लिक करने के लिए देखें यह

काम कर रहा है

अद्यतन

आप सही अनलोड रद्द कर दिया हैं, लेकिन आप आप सुनिश्चित करने के लिए वहाँ हमेशा एक इतिहास राज्य है

$(window).unload(function(e){ 
    e.preventDefault(); 
    $(window).trigger('beforeunload'); 

}); 


$(window).bind('beforeunload',function(){ 

alert('call your ajax here'); 
    return ''; 
}); 

yet another DEMO