बैक बटन के साथ AJAXy पृष्ठ अपडेट को कैसे मिश्रित करें ताकि उपयोगकर्ता वापस आने पर अपडेट अभी भी वहां हों?

Question

मेरे पास एक ऐसा पृष्ठ है जिसे उपयोगकर्ता संशोधित कर सकता है। सभी संशोधनों को JQuery का उपयोग करके किया जाता है, और सर्वर को भी भेजा जाता है, ताकि एक पूर्ण रीलोड भी संशोधित पृष्ठ का उत्पादन करेगा।

यह फ़ायरफ़ॉक्स 11/विंडोज़ पर क्रोम में ठीक काम करता है: भले ही उपयोगकर्ता कहीं और नेविगेट करता है और फिर "बैक" बटन का उपयोग करता है, तो उन्हें पृष्ठ को उनके नवीनतम संपादन के साथ मिलता है।

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

मैंने एक सरल टेस्टकेसhere जो इस व्यवहार को दिखाता है, को एक साथ रखा है।

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

पीएस स्पष्ट रूप से "कामकाजी" उदाहरण वास्तव में ओएसएक्स पर क्रोम में काम नहीं करता है। पृष्ठ के एक पुराने संस्करण पर वापस जाने के लिए मैं ब्राउज़र के आग्रह के आसपास कैसे काम कर सकता हूं?

बग रिपोर्ट इस व्यवहार का वर्णन: Firefox

---

बाउंटी: फ़ायरफ़ॉक्स और क्रोम विंडोज प्रदर्शनी दोनों व्यवहार (एक मामले में वापस संशोधित डोम के लिए जा रहा है, लेकिन किसी अन्य रूप में असंशोधित) पर । क्या कोई स्पेक वर्णन करता है कि ब्राउज़र क्या करना चाहिए? क्या इस तरह से एक या दूसरे को बदलने के लिए दायर की गई बग हैं? क्या इस मुद्दे का एक आम नाम है जिसे मैं Google कर सकता हूं?

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

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

Answer 1

पेज में गूगल मानचित्र को एम्बेड अक्षम कर देता है bfcache क्योंकि नक्शे एक में लोड किए गए पृष्ठ एक unload श्रोता का उपयोग करता है (मैं एक मानक एक की कमी के लिए मोज़िला शब्द का प्रयोग करेंगे)।

फ़ायरफ़ॉक्स में फास्ट बैक नेविगेशन के लिए कैश किए जाने वाले पृष्ठ के संभावित कारण एमडीएन: Using Firefox 1.5 caching पर सूचीबद्ध हैं। आपकी समस्या को "शीर्ष-स्तर वाले पृष्ठ में फ़्रेम शामिल हैं जो कैशबल नहीं हैं" के रूप में सूचीबद्ध है, जो भ्रमित है, मैं इसे बाद में स्पष्ट करने की कोशिश करूंगा। (अन्य ब्राउज़र संभवतः समान सामग्री का उपयोग करते हैं, क्योंकि इन नियमों को मौजूदा सामग्री को तोड़ने से बचने के लिए विकसित किया गया था - this answer भी देखें, इसमें कुछ लिंक हैं।)

इसे ठीक करने का सही तरीका Google पर किसी से मित्र होना होगा और फिर उन्हें नाराज करना होगा जब तक वे कम से कम 'एम्बेडेड पृष्ठों' से onunload श्रोता को हटा दें।

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

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

---

कारण bfcache इस तरह से काम करता है: ब्राउज़र एक ऑनअनलोड हैंडलर चलाता

• , तो bfcache के माध्यम से पेज पुनर्स्थापित करता है, पेज, तोड़ा जा सकता है के बाद से स्क्रिप्ट अक्सर में घटना श्रोताओं को दूर ऑन-लोड हैंडलर ("साफ करें", जो पुराने आईई संस्करणों को छोड़कर वास्तव में जरूरी नहीं है)
• यदि ब्राउज़र पेज पर वापस आने के आधार पर onunload हैंडलर चलाना बंद कर देता है और उपयोगकर्ता चाहें तो वे चाहते हैं इसे कैश करने के लिए, लेखक शिकायत करेंगे।
• यदि आईफ्रेम में कोई पृष्ठ कैश नहीं किया जा सकता है, तो कैश किए गए बाहरी पृष्ठ को पुनर्स्थापित करना और आंतरिक पृष्ठ को पुनः लोड करना कभी-कभी उन्हें तोड़ देगा (उदाहरण के लिए यदि दोनों पृष्ठ समान डोमेन हैं, तो बाहरी पृष्ठ फ्रेम में ऑब्जेक्ट्स के संदर्भ रख सकता है , जो आंतरिक फ्रेम को फिर से लोड करने के बाद मान्य नहीं होगा)। तो अगर एक आईफ्रेम कैश नहीं किया गया है, न तो मूल पृष्ठ है।

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

उम्मीद है कि इससे मदद मिलती है।

---

[संपादित करें] मैं उपरोक्त विचार "पृष्ठ को कैश करने योग्य नहीं" विषय पर विस्तारित करूंगा। वेब ब्राउजर कैश के लिए काम करने के लिए, और आपके खिलाफ नहीं, यह याद रखना महत्वपूर्ण है कि HTTP संसाधनों को पुनर्प्राप्त करने के लिए प्रोटोकॉल है। उदाहरण के लिए, यूआरएल http://bbb.akshell.com/broken द्वारा पहचाना गया HTML पृष्ठ एक संसाधन है।जब आप HTTP पर संसाधन की सेवा करते हैं तो आप निर्दिष्ट करते हैं कि संसाधन की ब्राउज़र की प्रति कितनी देर वैध होगी (यानी सर्वर पर संसाधन के कैनोलिक संस्करण से मेल खाते हैं)।

जब, आपके टेस्टकेस में, संसाधन एक HTML पृष्ठ है जिसे उपयोगकर्ता द्वारा चुने गए आइटम के साथ एक विशेष तरीके से चिह्नित किया जाता है, संसाधन किसी भी समय बदल सकता है (जब भी उपयोगकर्ता चयन में परिवर्तन करता है)। इसका मतलब है कि इस संसाधन की सेवा करते समय ईमानदार HTTP प्रतिक्रिया "कैश नहीं है, किसी भी समय बदल सकती है"। ब्राउजर सर्वर को पृष्ठ लोड करने की आवश्यकता होने पर हर बार सर्वर को फिर से लोड करेगा - सही व्यवहार, लेकिन उपयोगकर्ता के लिए धीमेपन की लागत पर।

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

एक और दृष्टिकोण, जो आपके मामले पर अधिक लागू होता है, जिसमें आप सर्वर पर उपयोगकर्ता के इनपुट को सहेजते हैं: ऐप यूआई और उपयोगकर्ता के डेटा को विभिन्न संसाधनों में अलग करें (यानी जेएस के साथ एक स्थिर (HTTP-) कैशबल HTML पृष्ठ , उपयोगकर्ता डेटा को एक अलग गैर-कैश करने योग्य यूआरएल से लोड करना)। उपयोगकर्ता डेटा की मांग और लोड पर यूआई [/ संपादित करें] अद्यतन

Answer 2

आपका 'कामकाजी' पृष्ठ मेरे लिए काम नहीं करता है - कम से कम जिस तरह से आप इसे चाहते हैं।

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

जब आप डोम अपडेट करते हैं तो आप एक क्वेरी स्ट्रिंग के साथ यूआरआई को अपडेट करने का प्रयास कर सकते हैं jQuery के माध्यम से। ब्राउज़र को लौटने पर नवीनतम को पकड़ने के लिए मजबूर कर सकता है।

Answer 3

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

उदाहरण के लिए, आपका "मुझे चुनें!" लिंक # 3 http://bbb.akshell.com/broken#link3 का नेतृत्व करेगा। इससे पेज रीलोड नहीं होगा। इसलिए यदि पृष्ठ "बैक" दबाए जाने के बाद स्क्रैच से लोड किया गया है, तो भी आपके पास यूआरएल में # link3 है और आप इसे उस राज्य में प्राप्त करने के लिए इसका उपयोग कर सकते हैं, जिस स्थिति में आप चाहते हैं (इस मामले में, आग "मुझे चुनें!" # 3)।

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

पीएस यही वह है "मुझे ब्राउजर पर भरोसा नहीं है" समाधान। यदि आप भरोसा करते हैं - एक समाधान की आवश्यकता है जो उनमें से प्रत्येक में काम करता है, मैं इसे भी देखना चाहता हूं।

Answer 4

आप कुकीज में यथासंभव अधिक से अधिक जानकारी संग्रहीत करने और आवश्यकता होने पर पृष्ठ को "पुनर्निर्माण" करने का प्रयास कर सकते हैं।

जब भी आप पृष्ठ तक पहुंचते हैं तो कुकीज़ को हर बार भेजा जाएगा (कुकीज में संग्रहीत डेटा की मात्रा सीमित करना मुझे लगता है), लेकिन यह क्रॉस-ब्राउज़र संगत होना चाहिए।

एक और तरीका डेटा को window.name में संग्रहीत करना होगा। इस दृष्टिकोण के लिए पेशेवरों, विपक्ष और कुछ विकल्प के लिए question 203075 देखें।

संपादित करें: एप्लिकेशन के राज्यों को स्टोर करने और प्रत्येक के साथ एक आईडी को जोड़ने के लिए उपयोगी हो सकता है, फिर पते पर #stateID<state id here> जैसे कुछ जोड़ें। जब उपयोगकर्ता बैक बटन पर क्लिक करता है, तो आप जान सकते हैं कि कौन सा राज्य लोड करना है।

यानी .:

अपने राज्य selectMeItemSelected और mapInfo{latitude, longitude, zoomLevel} में जानकारी शामिल है कहो।

उपयोगकर्ता पहले साइट में प्रवेश जब आप को बचाने stateID# 1 कुकीज़ में (या कहीं और, लेकिन मैं इस उदाहरण में कुकीज़ का उपयोग किया जाएगा) के रूप में:

state[1].selectMeItemSelected = 1; 
state[1].mapInfo.latitude = 45; 
state[1].mapInfo.longitude = 45; 
state[1].mapInfo.zoomLevel = 2; 

यह आप जोड़ने के बाद वेबसाइट पते पर #stateID1।

जब उपयोगकर्ता आपके एजेक्स कोड को सक्रिय करने वाली कोई क्रिया करता है, तो आप कुकीज़ में एक और राज्य संग्रहीत करते हैं, URL को #stateID2 पर बदलें और फिर अपने AJAX कोड को फिर से शुरू करें।

जब आप पाते हैं कि उपयोगकर्ता ने बैक (या आगे) बटन पर क्लिक किया है, तो बस राज्य में संग्रहीत जानकारी का उपयोग कर पृष्ठ लोड करें।

यदि आप stateID क्रमशः उत्पन्न करते हैं, तो आपको उन राज्यों को भी साफ़ करना चाहिए जो नए राज्य को जोड़ने से पहले वर्तमान स्थिति का पालन करें। इस तरह से आप आगे और ब्राउज़र में आगे बटन के व्यवहार मिलता है: अगर आप वापसstateX से, फिर एक और लिंक पर क्लिक करें (AJAX हो सकता है), आप एक सक्रिय आगे बटन को सक्रिय नहीं होगा क्लिक करें राज्य x पर "वापस" जाने के लिए क्लिक करें और आप उस राज्य को साफ़ करने पर विचार कर सकते हैं।

यह दृष्टिकोण बुकमार्क के साथ काम नहीं करता है, जब तक कि आप सर्वर पर राज्यों को संग्रहीत नहीं करते हैं और हर बार राज्य की जानकारी पास करते हैं या किसी प्रकार के परमालिंक को लागू करते हैं।

मुझे आशा है कि मैं अपने विचार को व्यक्त करने में सफल रहा हूं क्योंकि जब मैं इसे फिर से पढ़ता हूं तो यह थोड़ा अस्पष्ट लगता है। यदि आपके पास कोई प्रश्न है तो बस एक टिप्पणी छोड़ दें (यदि आपको यह जानकारी उपयोगी या पाठ्यक्रम मिलती है)।

आशा है कि यह मदद करता है :)

Answer 5

मैं नहीं जानता कि सभी ब्राउज़रों domready घटना (वास्तव में किसी भी घटना या) चलेंगे कि क्या जब आप वापस जाएं बटन दबाएं और इसे संचित पृष्ठ पर ले जाता है। यह स्पष्ट है कि यदि कोई ब्राउज़र किसी भी घटना को नहीं चलाता है, तो आप ऐसा कुछ भी नहीं कर सकते हैं।

हालांकि, मेरा संदेह यह है कि वे डोमरेड ईवेंट चलाएंगे। यदि उन्होंने नहीं किया, तो $(function() { ... }) के माध्यम से जोड़े गए jQuery ईवेंट हुक सेट नहीं किए जाएंगे, और यदि ऐसा होता, तो शायद मुझे बग का सामना करना पड़ता था (क्योंकि यह उपयोगकर्ता के रूप में मेरे लिए बहुत अधिक दिखाई देगा)।

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

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

$(document.body).data('modified', true); 

बेशक

नकारात्मक पक्ष यह है कि आप कोड है कि पेज को संशोधित करता है के हर ajaxy टुकड़ा में ऐसा करने की जरूरत है। यदि आपके पास एक केंद्रीकृत फ़ंक्शन है जो आपके सभी एजेक्सी डॉम संशोधित हो जाता है, तो यह काफी आसान है।

$(window).unload†(function() { 
    $(function() { 
     if (!$(document.body).data('modified')) 
      forceReload(); 
    }); 
}); 

बेशक आप होगा अपने आप को forceReload() लिखने के लिए:

यहाँ windowunload † हैंडलर के लिए मेरी प्रयास है। यह एक साधारण location.reload‡() या एक अजैक्सी कॉल हो सकता है।

† मुझे घटना के सही नाम या jQuery फ़ंक्शन को हुक करने के लिए याद नहीं है।

‡ इसी तरह, जांचें कि इसे reload या refresh या कुछ और कहा गया था या नहीं।

Answer 6

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

@ lucian.pantelimon के समाधान का उपयोग + पुशस्टेट + लोकलस्टोर आपको जो चाहिए वो प्राप्त कर लेना चाहिए।

<script> 
window.addEventListener("popstate", function(e) { 
    alert("hello"); // do my restoration from localstorage. 
}); 
</script> 

@TimWi सही है कि ब्राउज़र एक घटना "ऊपर गंदगी क्रीक" की अपनी तरह की आग नहीं करता है।

एक चीज जिसे आप जांचना चाहते हैं वह एक फ्रेमसेट (एला रेडडिट/Google छवियों/लिंक्डइन आलेख शैली) का वास्तव में सकल हैक है।

संपादित करें: ऐसा लगता है कि जब रीमोट साइट पर बैक बटन दबाया जाता है तो पुशस्टेट ईवेंट को निकाल दिया नहीं जाता है।

संपादित 2: ऐसा लगता है कि मेरे फ़ायरफ़ॉक्स वी 10.0 में पुशस्टेट के साथ समस्याएं हैं। यह क्रोम में ठीक काम करता है।

Answer 7

यह चाल फ़ायर्फ़ॉक्स के लिए bfcache साफ हो जाएगा:।

window.onunload = function(){}