2010-08-11 11 views
8

जीमेल में एक समृद्ध जेएस एप्लिकेशन में बैक/फॉरवर्ड बटन को संभालने का कुछ चालाक तरीका प्रतीत होता है।जीमेल कैसे समृद्ध जावास्क्रिप्ट में पीछे/आगे संभालता है?

मेरे संगठन में हमने jQuery इतिहास प्लगइन को ट्रायल किया। प्लगइन मूल रूप से प्रत्येक 100ms में एक फ़ंक्शन चलाता है जो URL को पार करता है और परीक्षण करता है तो परीक्षण करता है। इतिहास को HTTP एंकर द्वारा ट्रैक किया जाता है, और अगर एंकर बदल गया है तो प्लगइन नए एंकर में गुजरने वाले उपयोगकर्ता द्वारा निर्दिष्ट कॉलबैक को कॉल करता है, ताकि पृष्ठ नई सामग्री में लोड करने के लिए कस्टम व्यवहार कर सके।

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

तो हम ब्राउजर में बैक/फॉरवर्ड कार्यक्षमता को लागू करने के लिए इस बिंदु पर छोड़ दिया। हालांकि, मैंने हाल ही में देखा है कि जीमेल इसे अच्छी तरह से लागू करता है। यह HTTP एंकर मूल्य का भी उपयोग करता है, लेकिन मैंने "ब्रेक ऑन नेक्स्ट" दबाया और जीमेल हर 100 एमएमएस में किसी प्रकार का फ़ंक्शन नहीं चलाता है। जीमेल इस बैक/फॉरवर्ड व्यवहार को कैसे कार्यान्वित करता है?

+1

संभावित डुप्लिकेट [कैसे जीमेल रीफ्रेश किए बिना आईई बैक काम करता है?] (Http://stackoverflow.com/questions/1404434/how-gmail-makes-ie-back-work-without-refresh) –

उत्तर

6

शायद आप यहाँ jQuery इतिहास प्लगइन के बारे में बात कर रहे हैं: http://www.balupton.com/projects/jquery-history कौन सा आदमी में इस्तेमाल किया गया है वाई उत्पादन गुणवत्ता साइटों; मेरे पसंदीदा में से एक http://wbhomes.com.au/

यदि ऐसा है, तो यह older generation browsers के लिए 200ms परीक्षण का उपयोग करता है जो onhashchange घटना को मूल रूप से लागू नहीं करता है। उस घटना के बिना मूल रूप से कार्यान्वित किया गया है, आपको अंतराल परिवर्तन का उपयोग करके इसकी कार्यक्षमता को काम करना होगा - मेरे ज्ञान के लिए कोई अन्य तरीका नहीं है। सौभाग्य से सभी प्रमुख ब्राउज़रों के नवीनतम संस्करण अब मूल रूप से ऑनशैशचेंज ईवेंट का समर्थन करते हैं, इसलिए इस चेक की अब आवश्यकता नहीं है।

लेकिन हां, चलिए 200ms अंतराल की जांच में क्या करते हैं। यदि वे आईई 6 या 7 पर हैं, तो यह एक आईफ्रेम की स्थिति की जांच करेगा (जैसा कि उन ब्राउज़रों में बैक और फॉरवर्ड बटन अनुकरण करने के लिए आईफ्रेम की आवश्यकता होती है - जहां अन्य ब्राउज़रों के लिए आईफ्रेम की आवश्यकता नहीं होती है)। यदि वे एक और पुराने ब्राउजर का उपयोग कर रहे हैं जो आईई नहीं है तो यह चेक में location.getHash() का उपयोग कर सकता है (जैसा कि पहले बताया गया है तो iframe के बिना)। दोनों प्रकार के चेक बेहद तेज़ और यथासंभव न्यूनतम होने के लिए डिज़ाइन किए गए हैं, जिससे आवश्यक ओवरहेड कुछ भी नहीं हो सकता है। ब्राउजर वास्तव में आपको क्या करने के लिए तैयार है, और कम से कम गहन कोड का उपयोग करके इसे करने की कोशिश कर रहा है।

नोट: v1.4.2-final (12 अगस्त, 2010) jQuery इतिहास की रिलीज से पहले एकमात्र मान्यता प्राप्त ब्राउज़र जो मूल रूप से ऑनशैश का समर्थन करता था आईई 8 और ऊपर था। यह jQuery इतिहास प्रोजेक्ट के सभी नए संस्करणों में हल किया गया है।

+0

अद्यतन jQuery इतिहास के लिए जारी किया गया है, इसलिए अब ब्राउज़र की नई लहर के लिए उपयोग की जाने वाली अंतराल जांच नहीं है। आप देशी समर्थन के लिए नया स्रोत कोड यहां देख सकते हैं: http://github.com/balupton/jquery-history/blob/133790d9884b7d317777720ba975c99e9c11de6/scripts/resources/jquery.history.js#L304 यदि आपके पास कोई अन्य है jQuery इतिहास के बारे में चिंताओं या फीडबैक यह शानदार होगा अगर आप हमें यहां समर्थन पृष्ठ पर बता सकते हैं: http://getsatisfaction.com/balupton/products/balupton_jquery_history – balupton

1

आप इस पिछले प्रश्न जांच करना चाह सकते:

Is there a way to catch the back button event in javascript?

यह जिस तरह से यह jQuery में किया है की तरह लगता है यह करने के लिए एक ही रास्ता है, क्योंकि जो YUI भी कर रही है कि:

http://developer.yahoo.com/yui/history/

+0

यहां कुछ है यूयूआई ब्राउज़र इतिहास प्रबंधक के निर्माण पर पृष्ठभूमि की जानकारी: http://yuiblog.com/blog/2007/02/21/browser-history-manager/। – ptrin

संबंधित मुद्दे