अजाक्स, बैक बटन और डोम अपडेट

Question

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

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

यह समझ में आता है, फिर भी कुछ वेबसाइटें (apple.com, basecamphq.com आदि) किसी तरह ब्राउज़र को पेज की नवीनतम स्थिति की सेवा के लिए मजबूर कर रही हैं। ( http://www.apple.com/ca/search/?q=ipod पर जाएं , सबसे ऊपर दिए गए डाउनलोड डाउनलोड लिंक पर क्लिक करें और फिर बैक बटन पर क्लिक करें - सभी DOM अपडेट संरक्षित रहेंगे)

असंगति कहाँ से आ रही है?

Comments

दिलचस्प बात यह है कि Apple हैश को संशोधित किए बिना राज्य को याद कर रहा है .. हम्म

— जेम्स

Apple को लगता है कि वे प्रतिक्रिया कैशिंग में हेरफेर कर रहे हैं

— BigBlondeViking

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

— BYK

Apple का उदाहरण खराब है। यदि आप एक खोज क्षेत्र [एक्स: उत्पादों] को अनुबंधित करते हैं, तो अपने लिंक पर क्लिक करें, फिर वापस दबाएं, डोम संरक्षित नहीं है। आप एक हैश सॉल्यूशन की तलाश कर रहे हैं, जिसे कई लोगों ने सुझाया है।

— BigBlondeViking

जब मैं बैक बटन दबाता हूं, तो Apple को यह याद नहीं रहता है कि मैं खोज परिणामों के किस पृष्ठ पर था। IE7 का उपयोग करना। आपको हैश समाधान की आवश्यकता है। देखें: फेसबुक

— जोश स्टोडोला

Answer 1

एक उत्तर: अन्य बातों के अलावा, अनलोड घटनाओं के कारण बैक / फॉरवर्ड कैश अमान्य हो जाता है ।

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

ध्यान दें कि Cache-Control और अन्य HTTP हेडर के संबंध में bfcache का व्यवहार मानक ब्राउज़र कैश से भिन्न है। कई मामलों में, ब्राउज़र bfcache में एक पृष्ठ को कैश करेगा भले ही वह इसे मानक कैश में संग्रहीत नहीं करेगा।

jQuery स्वचालित रूप से विंडो में एक अनलोड घटना देता है, इसलिए दुर्भाग्यवश jQuery का उपयोग आपके पेज को DOM प्रिजर्वेशन और क्विक बैक / फॉरवर्ड के लिए bfcache में स्टोर होने से अयोग्य घोषित कर देगा।। [अद्यतन: यह jQuery 1.4 में तय किया गया है ताकि यह केवल IE पर लागू हो]

• फ़ायरफ़ॉक्स bfcache के बारे में जानकारी
• सफ़ारी पृष्ठ कैश के बारे में जानकारी और भविष्य के संभावित परिवर्तन कैसे अनलोड करने के लिए काम करते हैं
• ओपेरा तेज इतिहास नेविगेशन का उपयोग करता है
• Chrome में पृष्ठ कैश नहीं है ( [1] , [२] )
• DOM जोड़तोड़ और bfcache के साथ खेलने के लिए पृष्ठ:
  • यह पृष्ठ नियमित कैश में संग्रहीत किया जाएगा
  • यह पृष्ठ नहीं होगा, लेकिन अभी भी bfcached होगा

Comments

आपने इसे पूरी तरह से भुनाया। दोनों, रेडिट और स्टैकओवरफ्लो jquery का उपयोग कर रहे हैं, जबकि बेसकैंप और सेब प्रोटोटाइप का उपयोग कर रहे हैं। यह बहुत कुछ सब कुछ समझाता है।

— लुबोस हैस्को 22

+1 दिलचस्प (ब्राउज़र को पार नहीं करना) हालांकि यह सवाल तब से अलग है जब यह शुरू हुआ था ...

— BigBlondeViking

यह शायद क्रॉस-ब्राउज़र होगा क्योंकि मैं इसे अपने इंटरनेट एक्सप्लोरर पर भी पुन: पेश कर सकता हूं। मुझे यकीन है कि जावास्क्रिप्ट के साथ हर webbrowser सक्षम था वैसे भी इस समस्या से निपटने के लिए। लेकिन यह वास्तव में एक गड़बड़ है, जब आप इस बारे में सोचते हैं, तो बैक बटन हमेशा लोगों को उस पृष्ठ पर ले जाना चाहिए जो उन्होंने सभी डोम अपडेट, जावास्क्रिप्ट स्टेट आदि के साथ अंतिम बार देखा है। डेवलपर्स को अनलोड घटना में कुछ करके यह नहीं तोड़ना चाहिए और यदि वे करते हैं, तो वेबब्रोर्स को bfcache का उपयोग न करके समस्या को ठीक करने का प्रयास नहीं करना चाहिए। पूरी उतराई घटना एक बड़ा मजाक है। मुझे यकीन है कि 99% समय स्मृति रिसाव को पैच करने के लिए उपयोग किया जाता है।

— लुबोस हैस्को

विशेष रूप से, IE मेमोरी लीक। :) jQuery के अनलोड घटना भी फ़ायरफ़ॉक्स 2 में एक (पूरी तरह से असंबंधित) बग को ठीक करने के लिए होती है। लेकिन यह अन्य ब्राउज़रों के लिए अनावश्यक है। dev.jquery.com/ticket/3015 मुझे लगता है कि मैंने onunload के लिए अन्य उपयोगों के बारे में सुना है, जैसे आउटबाउंड क्लिक ट्रैकिंग या वेबैप स्थिति को सहेजना, लेकिन मेरे पास इसे स्वयं उपयोग करने का कोई कारण नहीं है, और यदि डेवलपर्स अपना बनाना चाहते हैं साइटें अपने उपयोगकर्ताओं के लिए धीमी और अधिक दर्दनाक होती हैं (मुझे नफरत है कि कैसे पुन: टिप्पणी पेजों को फिर से लोड करने के लिए नेविगेट करना टिप्पणी को ध्वस्त स्थिति में बदल देता है), यही उनका विशेषाधिकार है।

— माइल्स

अनलोड घटना केवल IE के लिए फ़ायरफ़ॉक्स और क्रोम के लिए संलग्न है। सफारी का नवीनतम संस्करण कुछ भी करने के लिए देव के बिना डोम राज्य को संरक्षित करता है।

— डेविड

Answer 2

मैं क्रोम को सफारी की तरह व्यवहार करने के लिए प्राप्त करने की कोशिश कर रहा हूं, और एकमात्र तरीका जो मैंने पाया है कि Cache-control: no-storeहेडर में काम करना है । जब उपयोगकर्ता बैक बटन दबाता है तो यह ब्राउज़र को सर्वर से पृष्ठ को फिर से लाने के लिए मजबूर करता है। आदर्श नहीं है, लेकिन एक आउट-ऑफ-डेट पृष्ठ दिखाए जाने से बेहतर है।

Comments

यह मूल प्रश्न का सही उत्तर है। यदि आप बैक-बटन पर सर्वर को फिर से लोड करना चाहते हैं, तो कैश-कंट्रोल 'नो-स्टोर, नो-कैश, मस्ट-रिवाइंडलेट' का उपयोग करें। Chrome नो-स्टोर चाहता है, और IE को पुन: अमान्य होना चाहिए। अन्य ब्राउज़रों (और w3c) के लिए नो-कैश पर्याप्त नहीं है।

— woens

Answer 3

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

Comments

आज के रूप में यह मर जाता है ऐसा नहीं है मुझे बता सकते हैं कि फेसबुक अब क्या करता है

— रविन्दर पायल

Answer 4

इसका हैश (#) प्रतीक से कोई लेना-देना नहीं है।

यदि आप ऐप्पल के HTTP हेडर की जाँच करेंगे, तो यह केवल पृष्ठ को कैशिंग कर रहा है।

Comments

Apple उदाहरण खराब है, वे "राज्य" बचत नहीं कर रहे हैं, उनकी धारणा डोम गलत है संरक्षित है

— BigBlondeViking

Answer 5

URL हैश / टुकड़ा पहचानकर्ता का उपयोग अजाक्स और डोम अपडेट पर निर्भर रहने वाले वेब एप्लिकेशन में राज्य को हुक / याद रखने का एक बहुत ही सामान्य तरीका है।

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

Answer 6

किसी के साथ समस्याओं में चल रहा है Rails और इसके लिए - आपका मुद्दा bfcache नहीं है (मुझे लगा कि यह था) - यह turbolinksमणि है। इसे हटाने का तरीका यहां बताया गया है।

उम्मीद है कि यह आपको कुछ समय बचाएगा और दीवार के खिलाफ अपना सिर पीटने लगेगा।

Answer 7

आप जो खोज रहे हैं वह कुछ प्रकार के URL हैश प्रबंधन के लिए है। Url में # केवल क्लाइंट साइड के लिए है।

जब आप जेएस के साथ बैक की स्थिति बदलते हैं, तो आप डेटा को # यूआरएल में अपडेट करते हैं।

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

इस पर एक नजर डालिए:

http://ajaxpatterns.org/Unique_URLs

Comments

यह हैश प्रतीक के साथ कुछ नहीं करना है।

— लुका मैटीस जूल 28'09

आप गलत हैं, वह AJAX समाधान में पृष्ठ स्थिति को संरक्षित करने का सबसे सामान्य तरीका ढूंढ रहा है।

— BigBlondeViking