HTML5 इतिहास एपीआई का परिचय

एचटीएमएल 5 से पहले, केवल एक चीज जिसे हम नियंत्रित नहीं कर सकते थे और प्रबंधित नहीं कर सकते थे (सामग्री को पुन: लोड किए बिना या स्थान से हैक करके)। एक टैब का इतिहास था। एचटीएमएल 5 इतिहास एपीआई के आगमन के साथ , सब कुछ बदल गया है - अब हम इतिहास के आसपास चल सकते हैं (पहले हम भी कर सकते थे), इतिहास में तत्वों को जोड़ते हैं, इतिहास और अन्य उपयोगीताओं के साथ संक्रमण का जवाब देते हैं। इस लेख में, हम HTML5 इतिहास एपीआई को देखेंगे और एक साधारण उदाहरण लिखेंगे जो इसकी क्षमताओं को दिखाता है।

बुनियादी अवधारणाओं और वाक्य रचना

हिस्ट्री एपीआई एक डोम इंटरफेस पर निर्भर करता है - हिस्ट्री ऑब्जेक्ट। प्रत्येक टैब में एक अद्वितीय इतिहास ऑब्जेक्ट होता है, जो window.history में स्थित है। इतिहास में कई विधियाँ, घटनाएं और गुण हैं, जिन्हें हम जावास्क्रिप्ट से नियंत्रित कर सकते हैं। प्रत्येक टैब पृष्ठ (दस्तावेज़ ऑब्जेक्ट) इतिहास संग्रह का एक ऑब्जेक्ट है। कहानी के प्रत्येक तत्व में एक URL और / या राज्य ऑब्जेक्ट (राज्य ऑब्जेक्ट) शामिल हैं, जिसमें शीर्षक (शीर्षक), दस्तावेज़ ऑब्जेक्ट, प्रपत्र डेटा, स्क्रॉल स्थिति और पेज से जुड़ी अन्य जानकारी हो सकती है।

इतिहास वस्तु की मुख्य विधियाँ:

1. window.history.length : वर्तमान इतिहास सत्र में प्रविष्टियों की संख्या
2. window.history.state : वर्तमान इतिहास ऑब्जेक्ट लौटाता है
3. window.history.go(n) : एक विधि जो आपको इतिहास के आसपास चलने की अनुमति देती है। तर्क वर्तमान स्थिति के सापेक्ष ऑफसेट है। यदि 0 पास है, तो वर्तमान पृष्ठ अपडेट किया जाएगा। यदि सूचकांक इतिहास से परे चला जाता है, तो कुछ भी नहीं होगा।
4. window.history.back() : कॉलिंग go(-1) समान विधि
5. window.history.forward() : कॉलिंग go(1) समान विधि
6. window.history.pushState(data, title [, url]) : एक इतिहास तत्व जोड़ता है।
7. window.history.replaceState(data, title [, url]) : वर्तमान इतिहास आइटम को अपडेट करता है

इतिहास में 2 कदम पीछे जाने के लिए, आप इसका उपयोग कर सकते हैं:

 history.go(-2) 

कहानी आइटम जोड़ने के लिए, हम history.pushState उपयोग कर सकते हैं:

 history.pushState({foo: 'bar'}, 'Title', '/baz.html') 

इतिहास रिकॉर्ड बदलने के लिए, हम history.replaceState उपयोग कर सकते हैं:

 history.replaceState({foo: 'bat'}, 'New Title') 

जीवित उदाहरण

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

हम प्रत्येक छवि के शीर्षक को संग्रहीत करने के लिए data-* विशेषताओं का उपयोग करते हैं और इस संपत्ति को प्राप्त करने के लिए डेटासेट का उपयोग करते हैं:

 <li class="photo"> <a href="crab2.png" data-note="Grey crab!">crab2.png</a> </li> 

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

HTML5 इतिहास बचाव के लिए आता है! जब भी हम किसी फ़ाइल का चयन करते हैं, एक नया इतिहास रिकॉर्ड बनाया जाता है और दस्तावेज़ का location अपडेट किया जाता है (इसमें एक अद्वितीय छवि URL होता है)। इसका मतलब है कि हम अपनी छवियों को बायपास करने के लिए बैक बटन का उपयोग कर सकते हैं, जबकि एड्रेस बार में हमारे पास तस्वीर का सीधा लिंक होगा, जिसे हम बुकमार्क में सहेज सकते हैं या किसी को भेज सकते हैं।

कोड

हमारे पास 2 दिवस हैं। एक में फ़ोल्डर संरचना होती है, दूसरे में वर्तमान चित्र होता है। पूरे एप्लिकेशन को जावास्क्रिप्ट का उपयोग करके प्रबंधित किया जाता है। केवल सबसे महत्वपूर्ण बिंदुओं पर प्रकाश डाला जाएगा। उदाहरण के लिए स्रोत कोड बहुत छोटा है (लगभग 80 लाइनें), पूरे लेख को पढ़ने के बाद इसे देखें।

bindEvents पद्धति popstate ईवेंट के लिए हैंडलर को bindEvents करती है, जिसे तब कहा जाता है जब उपयोगकर्ता इतिहास से गुजरता है और एप्लिकेशन को अपने राज्य को अपडेट करने की अनुमति देता है।

 window.addEventListener('popstate', function(e){ self.loadImage(e.state.path, e.state.note); }, false); 

popstate इवेंट popstate को जो event ऑब्जेक्ट पास किया जाता है, popstate state प्रॉपर्टी होती है - यह वह डेटा होता है जिसे हमने pushState या replaceState करने के पहले तर्क के रूप में पास किया है।

हम एक हैंडलर को div पर click इवेंट से जोड़ते हैं जो हमारी फ़ाइल संरचना का प्रतिनिधित्व करता है। घटनाओं के प्रतिनिधिमंडल का उपयोग करते हुए, हम फ़ोल्डर खोलते हैं या बंद करते हैं या एक तस्वीर अपलोड करते हैं (इतिहास में एक प्रविष्टि के अलावा)। हम मूल तत्व के className को className ताकि हम यह समझ सकें कि हमने किन तत्वों को क्लिक किया है:
- अगर यह एक फ़ोल्डर है जिसे हम इसे खोलते हैं या बंद करते हैं
- अगर यह एक तस्वीर है, तो हम इसे दिखाते हैं और इतिहास का एक तत्व जोड़ते हैं

 dir.addEventListener('click', function(e){ e.preventDefault(); var f = e.target; //   if (f.parentNode.classList.contains('folder')) { //     self.toggleFolders(f); } //   else if (f.parentNode.classList.contains('photo')){ note = f.dataset ? f.dataset.note : f.getAttribute('data-note'); //   self.loadImage(f.textContent, note); //    history.pushState({note: note, path:f.textContent}, '', f.textContent); } }, false); 

वह विधि जो किसी छवि की सामग्री को संशोधित करती है और उसके हस्ताक्षर को अपडेट करती है वह बहुत ही सरल है:

 loadImage: function(path, note){ img.src = path; h2.textContent = note; } 

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

मैं इसका उपयोग कब कर सकता हूं?

फ़ायरफ़ॉक्स 4+
सफारी 5+
क्रोम 10+
ओपेरा 11.5+
iOS सफारी 4.2+
Android 2.2+
IE ???
इतिहास एपीआई का समर्थन करने वाले ब्राउज़रों की सूची

इसका उपयोग कहां किया जाता है?

1. फेसबुक
2. गितुब - प्रोजेक्ट ट्री पर नेविगेशन
3. ???

आदर

मज़ा और लाभ के लिए 1. हेरफेर इतिहास
2. WHATWG HTML5 इतिहास एपीआई
3. W3C इतिहास एपीआई युक्ति
4. एमडीसी ब्राउज़र इतिहास में हेरफेर
5. History.js - स्क्रिप्ट उन ब्राउज़रों में HTML5 इतिहास API (स्थान.शश जादू) का अनुकरण करती है जो इसका समर्थन नहीं करते हैं