🍚 🍵 🌁 HTML5 इतिहास एपीआई आज और सीमा के बिना 😈 ⛹🏽 🛷

HTML5 इतिहास एपीआई काम करने के लिए लाइब्रेरी

यह परियोजना मूल रूप से पुराने HTML4 ब्राउज़रों में HTML5 इतिहास एपीआई के लिए समर्थन जोड़ने के लिए कल्पना की गई थी। पुस्तकालय के पहले संस्करणों का उद्देश्य इन आवश्यकताओं पर सटीक था, लेकिन इस पुस्तकालय का उपयोग करने वाले और सम्मानित डेवलपर्स की इच्छा को ध्यान में रखते हुए, यह इस स्तर तक बढ़ गया है कि यह इतिहास इंटरफ़ेस पर विनिर्देशों में वर्णित कार्यक्षमता को जोड़ने / तय करने के लिए कुछ मध्यवर्ती चरण करता है।

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

का प्रयोग करें।

पुस्तकालय का उपयोग करना बहुत सरल है, यह यथासंभव इतिहास इंटरफ़ेस के लिए आधिकारिक विनिर्देश का पालन करने की कोशिश करता है।

मैं एक छोटा सा उदाहरण दूंगा:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="history.js"></script> <script type="text/javascript"> window.onload = function() { //    DIV     function appendText( text ) { var div = document.createElement( "div" ); div.innerHTML = text; document.body.appendChild( div ); } //         function handlerAnchors() { //     var state = { title: this.getAttribute( "title" ), url: this.getAttribute( "href", 2 ) //    6-7 } //     history.pushState( state, state.title, state.url ); //       .. // ... appendText( '<b>   :</b> ' + '<span style="color: green;">' + state.url + '</span>' ); //       return false; } //    var anchors = document.getElementsByTagName( 'a' ); //         for( var i = 0; i < anchors.length; i++ ) { anchors[ i ].onclick = handlerAnchors; } //    popstate   //   back/forward   window.onpopstate = function( e ) { //   appendText( '<b>   :</b> ' + '<span style="color: green;">' + history.location + '</span>' + '<br/><b>state:</b> <span style="color: green;">' + JSON.stringify( history.state ) + '</span><br/><br/>' ); //       .. // ... } } </script> </head> <body> <h1>  ,       back/forward</h1> <a href="/mylink.html" title="    My Link">My Link</a> <a href="/otherlink.html" title="    Other Link">Other Link</a> </body> </html>

जैसा कि आप देख सकते हैं, इस लाइब्रेरी का उपयोग करने में कुछ भी जटिल नहीं है, ऊपर दिए गए उदाहरण से आपने शायद गौर किया है कि इतिहास इंटरफ़ेस के लिए विनिर्देशन में वर्णित विधियों के उपयोग में व्यावहारिक रूप से कोई मतभेद / मतभेद नहीं हैं। इसमें केवल एक मामूली अंतर है कि हमें वर्तमान लिंक तब मिलता है जब popstate घटना history.location से बाहर popstate ।

यह कैसे काम करता है?

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

HTML4 ब्राउज़रों में, निश्चित रूप से, हैश-फ़ॉलबैक का उपयोग किया जाता है, क्योंकि निश्चित रूप से ऐसे ब्राउज़रों के लिए कोई अन्य विकल्प नहीं है। लेकिन जावास्क्रिप्ट कोड के अंदर डेवलपर के लिए, यह किसी प्रकार की बीमारी नहीं होगी, क्योंकि लिंक ऐसे दिखेंगे जैसे मूल रूप से कल्पना की गई थी। और आपको हैश लिंक लिखने और / या खोज इंजन के नियमों का पालन करने की आवश्यकता नहीं है, ताकि वे, बदले में, साइट को सामान्य रूप से अनुक्रमित करें। आखिरकार, लिंक एक सामान्य रूप होंगे, जिसका अर्थ है कि खोज रोबोट चुपचाप वांछित लिंक पर क्लिक करेगा।

पुस्तकालय की कार्यक्षमता।

पुस्तकालय में इसके साथ काम करते समय छोटी सूक्ष्मताएँ होती हैं। जैसा कि हम पहले ही देख चुके हैं, लाइब्रेरी का अपना history.location ऑब्जेक्ट, यह प्रसिद्ध window.location से अलग नहीं है। window.location ऑब्जेक्ट। यही है, एक शब्द में, यह window.location ऑब्जेक्ट का एक संदर्भ है, सिवाय इसके कि HTML4 ब्राउज़रों में यह मूल ऑब्जेक्ट से गेटर्स / सेटर को इंटरसेप्ट करता है, आवश्यक संशोधन करता है और परिणाम देता है।

history.location साथ काम करने का तरीका कुछ भी सीमित नहीं है, आप इसे असाइन भी कर सकते हैं, इसे प्राप्त कर सकते हैं, इसके गुणों का उपयोग कर सकते हैं, आदि।

उदाहरण के लिए, यह इस तरह दिखता है:

  history.location = "http://yandex.ru/"; //     . history.location.hash = "#newhash"; //   hash  . //      ,  //     Location

पुस्तकालय की अगली सूक्ष्मता आपकी आवश्यकताओं के लिए इसका अनुकूलन है। लाइब्रेरी के पास कॉन्फ़िगर करने के लिए कोई ऑब्जेक्ट नहीं है, लेकिन script के HTML तत्व के माध्यम से लाइब्रेरी को कनेक्ट करते समय उन्हें GET पैरामीटर से प्राप्त होता है, अर्थात यह स्क्रिप्ट को साइट से कनेक्ट होने पर लिंक को पढ़ता है।

यह कुछ इस तरह दिखता है:

 <script type="text/javascript" src="history.js?type=/&redirect=true&basepath=/pathtosite/"></script>

लाइब्रेरी को साइट से कनेक्ट करके, आप पहले से निर्दिष्ट कर सकते हैं कि इससे क्या कार्रवाई आवश्यक है। पुस्तकालय में केवल तीन पैरामीटर हैं, अब मैं आपको उनके कार्यों और आवश्यकता का वर्णन करूंगा।

पैरामीटर: प्रकार

यह एक विशेष भूमिका नहीं निभाता है, इसे HTML4 ब्राउज़रों में लिंक को सजाने की आवश्यकता है। इस पैरामीटर में आप पूरी तरह से किसी भी लाइन / वर्ण को निर्दिष्ट कर सकते हैं जो # (हैश) चिह्न के बाद जोड़ा जाएगा, इसलिए आप बस लिंक को वांछित चरित्र / पाठ के साथ सजाते हैं। उदाहरण के लिए, यदि मैंने इस पैरामीटर को पाठ में सेट किया है: "HelloWorld /", तो लिंक में यह सबस्ट्रिंग होगा। चलो लिंक http://somesite.com/folder/page.html पर क्लिक करते हैं, हमें फॉर्म का एक लिंक मिलता है: http://somesite.com/#HelloWorld/folder/page.html । आप इस पैरामीटर के साथ प्रयोग कर सकते हैं। डिफ़ॉल्ट रूप से, इस पैरामीटर में लाइब्रेरी में एक विकल्प "/" (स्लैश) है।

पैरामीटर: बेसपाथ

इस पैरामीटर के अनुसार, महत्वपूर्ण मापदंडों में से एक, पुस्तकालय history.location लिए एक लिंक बनाता है। यह इंगित करता है कि साइट की जड़ कहां स्थित है, आमतौर पर साइटें सीधे डोमेन की जड़ में होती हैं, लेकिन कभी-कभी आपको साइट को मुख्य डोमेन से अलग फ़ोल्डर में रखने की आवश्यकता होती है। इसके लिए, यह पैरामीटर जोड़ा गया ताकि रूट के बाहर स्थित साइटें HTML4 ब्राउज़रों में पूरी तरह से काम कर सकें।

पैरामीटर: पुनर्निर्देशित

यह पैरामीटर HTML5 ब्राउज़र में HTML5 ब्राउज़र में कॉपी किए गए लिंक का अनुसरण करने पर साइट को पुनर्निर्देशित करने के लिए जिम्मेदार है। यह केवल फॉर्म के लिंक के बाद उपयोगकर्ता को रीडायरेक्ट करता है: http://somesite.com/#/folder/page.html फॉर्म के लिंक http://somesite.com/folder/page.html और इसके विपरीत अगर उपयोगकर्ता किसी ब्राउज़र से लिंक पर क्लिक करता है HTML5 से HTML4 ब्राउज़र। यह याद रखना महत्वपूर्ण है कि यह पैरामीटर बेसपेथ पैरामीटर से निकटता से संबंधित है, क्योंकि यह इस पैरामीटर के साथ है कि यह निष्कर्ष निकालता है कि उपयोगकर्ता को कहां पुनर्निर्देशित किया जाए।

निष्कर्ष।

अंत में, मैं यह जोड़ना चाहता हूं कि कभी-कभी आपको यह पता लगाने की आवश्यकता होती है कि हम किस ब्राउज़र में हैं, HTML4 ब्राउज़र में या HTML5 ब्राउज़र में। इन उद्देश्यों के लिए, मैंने window.history प्रॉपर्टी को window.history ऑब्जेक्ट में जोड़ा है जो दर्शाता है कि एमुलेशन हो रहा है या नहीं। यदि यह गुण सत्य है , तो हम HTML4 ब्राउज़र में हैं और हैश लिंक के साथ काम करते हैं, अन्यथा अन्यथा।

मैं यह भी जोड़ना चाहता हूं कि HTML5 ब्राउज़रों में लाइब्रेरी इतिहास इंटरफ़ेस और उससे जुड़ी हर चीज में बग / कमियों को ठीक करती है। उदाहरण के लिए, सफारी में यह इतिहास इंटरफ़ेस में एक राज्य वस्तु जोड़ता है, सफारी और क्रोम ब्राउज़रों में यह प्रारंभिक स्थिति को हटाता है (दस्तावेज़ के पहले लोड होने पर popstate घटना को popstate जाता है)।

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

पुस्तकालय पूरी तरह से किसी भी ढांचे के साथ काम करता है, और उन्हें अपने उद्देश्यों के लिए उपयोग नहीं करता है।

लाइब्रेरी का ब्राउज़रों में परीक्षण किया गया है:
IE 6+
फ़ायरफ़ॉक्स 3+
ओपेरा 11+
ओपेरा मोबाइल 11+
क्रोम 17+
सफारी 5+

यदि आपके पास अन्य ब्राउज़रों या संस्करणों में जांच करने का अवसर है और आप आसानी से मुझे सदस्यता समाप्त कर सकते हैं, तो मैं आपका बहुत आभारी रहूंगा।

सभी इच्छाएं, प्रश्न, बग रिपोर्ट आदि। आप मुझे github पर इंगित मेल भेज सकते हैं या github के मुद्दे अनुभाग में लिख सकते हैं।

आप इस लाइब्रेरी को GitHub: https://github.com/devote/HTML5-History-API पर डाउनलोड और देख सकते हैं

आप मेरी, दुर्भाग्य से, अधूरी वेबसाइट: http://history.spb-piksel.ru/ पर लाइब्रेरी के प्रदर्शन को भी देख सकते हैं। साइट खुद पूरी नहीं हुई है, लेकिन आप लाइब्रेरी के प्रदर्शन को देख सकते हैं।

UPD (09/12/2012): महत्वपूर्ण! मैंने अक्सर IE9 में पुस्तकालय की निष्क्रियता के बारे में लिखना / रिपोर्ट करना शुरू किया। समस्या इस तथ्य के कारण है कि IE9 एक मूडी ब्राउज़र है और सभी छोटी चीजों के साथ गलती पाता है। जैसा कि यह पता चला, कई डेवलपर्स जो गिटहब से ली गई स्क्रिप्ट का उपयोग करते हैं, उनकी अक्षमता की समस्याओं का सामना करना पड़ता है, क्योंकि IE9 को स्क्रिप्ट कनेक्ट करते समय एप्लिकेशन / जावास्क्रिप्ट हेडर प्राप्त करने की उम्मीद है, लेकिन गीथहब पाठ / सादे हेडर को वापस करता है। इसलिए, स्क्रिप्ट को सीधे GitHub से जोड़ने की अनुशंसा नहीं की जाती है। स्क्रिप्ट को अपने होस्ट पर डाउनलोड करें और उपयोग करें।

HTML5 इतिहास एपीआई आज और सीमा के बिना