मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
History.pushState() वापरल्याने तुम्ही स्टेट बदलल्यानंतर तयार केलेल्या XMLHttpRequest ऑब्जेक्ट्ससाठी HTTP हेडरमध्ये वापरला जाणारा रेफरर बदलतो. रेफरर हा दस्तऐवजाचा URL असेल ज्याची विंडो XMLHttpRequest ऑब्जेक्टच्या निर्मितीच्या वेळी असेल.
pushState() पद्धतीचे उदाहरणसमजा http://mozilla.org/foo.html खालील JavaScript कार्यान्वित करते:
स्टेटऑब्ज = ( foo: "बार", ); history.pushState(stateObj, "पृष्ठ 2", "bar.html");
हे URL बारला http://mozilla.org/bar.html प्रदर्शित करण्यास कारणीभूत ठरेल, परंतु ब्राउझरला bar.html लोड करण्यास कारणीभूत होणार नाही किंवा bar.html अस्तित्वात आहे हे देखील तपासणार नाही.
समजा आता वापरकर्ता http://google.com वर नेव्हिगेट करतो, नंतर बॅक बटणावर क्लिक करतो. या टप्प्यावर, URL बार http://mozilla.org/bar.html प्रदर्शित करेल आणि history.state मध्ये stateObj असेल. पॉपस्टेट इव्हेंट काढला जाणार नाही कारण पृष्ठ रीलोड केले गेले आहे पृष्ठ स्वतः bar.html सारखे दिसेल.
जर आपण परत परत क्लिक केले, तर URL http://mozilla.org/foo.html वर बदलेल आणि डॉक्युमेंटला पॉपस्टेट इव्हेंट मिळेल, यावेळी शून्य स्थिती ऑब्जेक्टसह. येथे देखील, मागे जाण्याने दस्तऐवजाची सामग्री मागील पायरीमध्ये होती त्यापेक्षा बदलत नाही, जरी पॉपस्टेट इव्हेंट प्राप्त झाल्यावर दस्तऐवज त्याच्या सामग्री व्यक्तिचलितपणे अद्यतनित करू शकतो.
पुशस्टेट() पद्धतpushState() तीन पॅरामीटर्स घेते: एक स्टेट ऑब्जेक्ट, एक शीर्षक (ज्याकडे सध्या दुर्लक्ष केले आहे), आणि (वैकल्पिकरित्या) एक URL. चला या तीन पॅरामीटर्सपैकी प्रत्येकाचे अधिक तपशीलवार परीक्षण करूया:
स्टेट ऑब्जेक्ट - स्टेट ऑब्जेक्ट एक JavaScript ऑब्जेक्ट आहे जो pushState() द्वारे तयार केलेल्या नवीन इतिहास नोंदीशी संबंधित आहे. जेव्हा जेव्हा वापरकर्ता नवीन स्थितीत नेव्हिगेट करतो तेव्हा एक पॉपस्टेट इव्हेंट काढला जातो आणि इव्हेंटच्या राज्य मालमत्तेमध्ये इतिहास नोंदीच्या स्टेट ऑब्जेक्टची प्रत असते.
स्टेट ऑब्जेक्ट कुठलाही असू शकतो जिला क्रमिक केले जाऊ शकते. कारण फायरफॉक्स स्टेट ऑब्जेक्ट्स वापरकर्त्याच्या डिस्कवर सेव्ह करतो जेणेकरून वापरकर्त्याने ब्राउझर रीस्टार्ट केल्यानंतर ते पुनर्संचयित केले जाऊ शकतात, आम्ही राज्य ऑब्जेक्टच्या अनुक्रमित प्रतिनिधित्वावर 640k वर्णांची आकार मर्यादा लादतो. तुम्ही राज्य ऑब्जेक्ट पास केल्यास ज्याचे अनुक्रमिक प्रतिनिधित्व आहे. pushState() पेक्षा मोठे, जर तुम्हाला यापेक्षा जास्त जागा हवी असेल, तर तुम्हाला sessionStorage आणि/किंवा localStorage वापरण्यास प्रोत्साहित केले जाईल.
शीर्षक - फायरफॉक्स सध्या या पॅरामीटरकडे दुर्लक्ष करते, जरी ते भविष्यात ते वापरू शकते. येथे रिकामी स्ट्रिंग पास करणे ही पद्धतीतील भविष्यातील बदलांपासून सुरक्षित असावे. वैकल्पिकरित्या, तुम्ही ज्या राज्यात जात आहात त्या राज्यासाठी तुम्ही एक लहान शीर्षक पास करू शकता.
URL - नवीन इतिहास एंट्रीची URL या पॅरामीटरने दिली आहे. लक्षात ठेवा की पुशस्टेट() ला कॉल केल्यानंतर ब्राउझर ही URL लोड करण्याचा प्रयत्न करणार नाही, परंतु तो URL नंतर लोड करण्याचा प्रयत्न करू शकतो, उदाहरणार्थ वापरकर्त्यानंतर ब्राउझर रीस्टार्ट करते. नवीन URL परिपूर्ण असणे आवश्यक नाही; जर ते सापेक्ष असेल, तर वर्तमान URL च्या सापेक्ष त्याचे निराकरण केले जाते. नवीन URL वर्तमान URL प्रमाणेच मूळ असणे आवश्यक आहे; अन्यथा, pushState() अपवाद करेल. हे पॅरामीटर ऐच्छिक आहे; जर ते निर्दिष्ट केले नसेल, तर ते दस्तऐवजाच्या वर्तमान URL वर सेट केले जाते.
टीप: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) द्वारे Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) मध्ये, पास केलेले ऑब्जेक्ट JSON वापरून अनुक्रमित केले आहे. Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) मध्ये सुरू करून, संरचित क्लोन अल्गोरिदम वापरून ऑब्जेक्टला क्रमबद्ध केले जाते. हे विविध प्रकारच्या वस्तू सुरक्षितपणे पास करण्यास अनुमती देते.
एका अर्थाने, pushState() ला कॉल करणे हे window.location = "#foo" सेट करण्यासारखेच आहे, ज्यामध्ये दोन्ही वर्तमान दस्तऐवजाशी संबंधित दुसरी इतिहास नोंद देखील तयार आणि सक्रिय करतील. परंतु pushState() चे काही फायदे आहेत:
- नवीन URL ही सध्याची URL सारखीच मूळ असलेली कोणतीही URL असू शकते. याउलट, window.location सेट केल्याने तुम्ही फक्त हॅश सुधारित केले तरच तुम्हाला समान दस्तऐवजावर ठेवते.
- तुम्हाला URL बदलण्याची गरज नाही. याउलट, window.location = "#foo" सेटिंग; जर वर्तमान हॅश #foo नसेल तरच नवीन इतिहास एंट्री तयार करते.
- तुम्ही तुमच्या नवीन इतिहासाच्या नोंदीसह अनियंत्रित डेटा संबद्ध करू शकता. हॅश-आधारित दृष्टिकोनासह, तुम्हाला सर्व संबंधित डेटा एका लहान स्ट्रिंगमध्ये एन्कोड करणे आवश्यक आहे.
- शीर्षक नंतर ब्राउझरद्वारे वापरले असल्यास, हा डेटा वापरला जाऊ शकतो (म्हणजे, हॅशपासून स्वतंत्र).
लक्षात ठेवा की pushState() कधीही हॅशचेंज इव्हेंट फायर केले जात नाही, जरी नवीन URL जुन्या URL पेक्षा फक्त त्याच्या हॅशमध्ये भिन्न असली तरीही.
तपशील| एचटीएमएल लिव्हिंग स्टँडर्ड |
राहणीमान | HTML5 मधून कोणताही बदल नाही. |
| HTML5 त्या तपशीलात "इतिहास" ची व्याख्या. |
शिफारस | प्रारंभिक व्याख्या. |
या पृष्ठावरील सुसंगतता सारणी संरचित डेटावरून तयार केली आहे. आपण डेटामध्ये योगदान देऊ इच्छित असल्यास, कृपया https://github.com/mdn/browser-compat-data पहा आणि आम्हाला पुल विनंती पाठवा.
GitHub वर सुसंगतता डेटा अद्यतनित करा
| डेस्कटॉप मोबाइल | ||||||||||||
| क्रोम एज फायरफॉक्स इंटरनेट एक्सप्लोरर ऑपेरा सफारी अँड्रॉइड वेबव्यू क्रोम फॉर अँड्रॉइड एज मोबाइल फायरफॉक्स फॉर अँड्रॉइड ऑपेरा फॉर अँड्रॉइड सफारी ऑन iOS सॅमसंग इंटरनेट | ||||||||||||
| Chrome पूर्ण समर्थन होय | एज पूर्ण समर्थन होय | फायरफॉक्स पूर्ण समर्थन होय | IE पूर्ण समर्थन होय | ऑपेरा पूर्ण समर्थन होय | सफारी पूर्ण समर्थन होय | सॅमसंग इंटरनेट Android ? | ||||||
| Chrome पूर्ण समर्थन होय | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन होय | I.E.? | ऑपेरा? | सफारी? | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल? | Firefox Android पूर्ण समर्थन होय | ऑपेरा अँड्रॉइड? | सफारी iOS? | सॅमसंग इंटरनेट अँड्रॉइड? |
| Chrome पूर्ण समर्थन होय | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन होय | I.E.? | ऑपेरा? | सफारी? | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल? | Firefox Android पूर्ण समर्थन होय | ऑपेरा अँड्रॉइड? | सफारी iOS? | सॅमसंग इंटरनेट अँड्रॉइड? |
| Chrome पूर्ण समर्थन होय | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन होय | I.E.? | ऑपेरा? | सफारी? | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल? | Firefox Android पूर्ण समर्थन होय | ऑपेरा अँड्रॉइड? | सफारी iOS? | सॅमसंग इंटरनेट अँड्रॉइड? |
| Chrome पूर्ण समर्थन होय | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन होय | I.E.? | ऑपेरा? | सफारी? | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल? | Firefox Android पूर्ण समर्थन होय | ऑपेरा अँड्रॉइड? | सफारी iOS? | सॅमसंग इंटरनेट अँड्रॉइड? |
| क्रोम पूर्ण समर्थन 5 | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन 4 नोट्स पूर्ण समर्थन ४नोट्स नोट्स | IE पूर्ण समर्थन 10 | ऑपेरा पूर्ण समर्थन 11.5 | सफारी पूर्ण समर्थन 5 | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल पूर्ण समर्थन होय | Firefox Android पूर्ण समर्थन होय | Opera Android पूर्ण समर्थन होय | सॅमसंग इंटरनेट अँड्रॉइड? | |
| क्रोम पूर्ण समर्थन 5 | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन 4 नोट्स पूर्ण समर्थन ४नोट्स नोट्स फायरफॉक्स 2 ते 5 मध्ये, पास केलेला ऑब्जेक्ट JSON वापरून क्रमबद्ध केला जातो. फायरफॉक्स 6 मध्ये प्रारंभ करून, ऑब्जेक्ट वापरून अनुक्रमित केले जाते. हे विविध प्रकारच्या वस्तू सुरक्षितपणे पार करण्यास अनुमती देते. | IE पूर्ण समर्थन 10 | ऑपेरा पूर्ण समर्थन 11.5 | सफारी पूर्ण समर्थन 5 | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल पूर्ण समर्थन होय | Firefox Android पूर्ण समर्थन होय | Opera Android पूर्ण समर्थन होय | सफारी iOS पूर्ण समर्थन 4.3 | सॅमसंग इंटरनेट अँड्रॉइड? |
| क्रोम पूर्ण समर्थन 46 | एज नो सपोर्ट क्र | फायरफॉक्स पूर्ण समर्थन 46 | IE नाही समर्थन नाही | ऑपेरा पूर्ण समर्थन 33 | सफारी पूर्ण समर्थन होय | WebView Android नाही समर्थन नाही | क्रोम अँड्रॉइड फुल सपोर्ट ४६ | एज मोबाईल सपोर्ट नाही | Firefox Android पूर्ण समर्थन होय | Opera Android पूर्ण समर्थन होय | सफारी iOS पूर्ण समर्थन होय | सॅमसंग इंटरनेट अँड्रॉइड? |
| Chrome पूर्ण समर्थन होय | एज फुल सपोर्ट १२ | फायरफॉक्स पूर्ण समर्थन होय | I.E.? | ऑपेरा? | सफारी? | WebView Android पूर्ण समर्थन होय | Chrome Android पूर्ण समर्थन होय | एज मोबाईल? | Firefox Android पूर्ण समर्थन होय | ऑपेरा अँड्रॉइड? | सफारी iOS? | सॅमसंग इंटरनेट अँड्रॉइड? |
16 उत्तरे
लहान उत्तर आहे: आपण करू शकत नाही.
तांत्रिकदृष्ट्या अस्तित्वात आहे अचूक मार्गप्रमाणीकरण:
इतिहास.मागील
तथापि, हे कार्य करणार नाही.
समस्या अशी आहे की बहुतेक ब्राउझरमध्ये हे सुरक्षेचे उल्लंघन मानले जाते आणि सहसा फक्त अपरिभाषित परत येते.. p>
इतिहास.लांबी
इतरांनी सुचवलेली ही मालमत्ता आहे...
तथापि, लांबी संपूर्णपणे कार्य करत नाही कारण तुम्ही कथेमध्ये कुठे ते निर्दिष्ट करत नाही. तसेच, ते नेहमी एकाच संख्येने सुरू होत नाही. उदाहरणार्थ, लँडिंग पेजसाठी कॉन्फिगर न केलेला ब्राउझर 0 ने सुरू होतो, तर दुसरा ब्राउझर जो लँडिंग पेज वापरतो तो 1 ने सुरू होतो.
History.back();
आणि हे अपेक्षित होते की जर तुम्ही परत येऊ शकत नसाल, तर दुव्यावर क्लिक केल्याने काहीही होणार नाही.
माझा कोड ब्राउझरला एका पृष्ठावर परत येण्याची परवानगी देतो आणि ते अयशस्वी झाल्यास, ते फॉलबॅक URL लोड करते. हे हॅशटॅग बदल देखील ओळखते.
बॅक बटण उपलब्ध नसल्यास, फॉलबॅक url 500ms नंतर लोड होईल, त्यामुळे ब्राउझरकडे मागील पृष्ठ लोड करण्यासाठी पुरेसा वेळ आहे. window.history.go(-1) नंतर लगेच रिटर्न URL लोड करत आहे; ब्राउझरला फॉलबॅक url वापरण्यास प्रवृत्त करेल कारण js स्क्रिप्ट अद्याप थांबलेली नाही.
फंक्शन इतिहासBackWFallback(fallbackUrl) ( fallbackUrl = fallbackUrl || "/"; var prevPage = window.location.href; window.history.go(-1); setTimeout(function())( if (window.location.href ==) prevPage ) ( window.location.href = fallbackUrl; ) ), 500 )
हे एक युक्तीसारखे दिसते:
कार्य goBackOrClose() ( window.history.back(); window.close(); //किंवा तुम्हाला विंडो बंद करण्यात स्वारस्य नसल्यास, येथे काहीतरी करा //उदा. theBrowserCantGoBack();)
history.back() आणि नंतर window.close() वर कॉल करा. जर ब्राउझर इतिहासात परत जाऊ शकत असेल, तर तो पुढील विधानावर जाऊ शकणार नाही. जर तो परत आला नाही तर तो खिडकी बंद करेल.
तथापि, लक्षात ठेवा की जर URL टाइप करून पृष्ठावर पोहोचले असेल, तर फायरफॉक्स स्क्रिप्टला विंडो बंद करू देणार नाही.
बॅक बटण उपलब्ध आहे की नाही हे तुम्ही थेट तपासू शकत नाही. तुम्ही history.length>0 वर पाहू शकता, परंतु हे फक्त तेव्हाच खरे असेल जेव्हा पृष्ठे पुढे आणि वर्तमान पृष्ठावर असतील. जर history.length===0 असेल तरच बॅक बटण निरुपयोगी आहे याची तुम्ही खात्री बाळगू शकता.
जर ते पुरेसे चांगले नसेल, तर तुम्ही फक्त history.back() वर कॉल करू शकता आणि तुमचे पृष्ठ अजूनही लोड केले असल्यास, बॅक बटण धूसर होईल! अर्थात, याचा अर्थ असा की जर बॅक बटण उपलब्ध असेल, तर तुम्ही फक्त पृष्ठापासून दूर नेव्हिगेट केले आहे. तुम्हाला onunload मध्ये नेव्हिगेशन ओव्हरराइड करण्याची परवानगी नाही, त्यामुळे रिव्हर्स थांबवण्यासाठी तुम्ही जे काही करू शकता ते म्हणजे onbeforeunload मधून काहीतरी परत करणे, ज्यामुळे एक मोठा त्रासदायक प्रॉम्प्ट दिसून येईल. त्याची किंमत नाही.
खरं तर ते सहसा खरे असते वाईट कल्पनाइतिहासासह काहीतरी करा. इतिहास नेव्हिगेशन - साठी क्रोम ब्राउझर, वेब पृष्ठांसाठी नाही. "परत जा" दुवे जोडल्याने सामान्यतः वापरकर्त्याच्या मूल्यापेक्षा अधिक गोंधळ होतो.
मी ते कसे केले ते येथे आहे.
मी बुलियन व्हॅल्यू सेट करण्यासाठी "foreunload" इव्हेंट वापरला. मी नंतर "foreunload" चालू होते की नाही हे पाहण्यासाठी कालबाह्य सेट केले.
Var $window = $(window), $trigger = $(".select_your_link"), fallback = "your_fallback_url";
hasHistory = असत्य; $window.on("foreunload", function())( hasHistory = true; )); $trigger.on("क्लिक", फंक्शन())( window.history.go(-1); setTimeout(function())( if (!hasHistory)( window.location.href = fallback; ) ), 200) खोटे परत करणे;
हे प्रमुख ब्राउझरमध्ये कार्य करते असे दिसते (आतापर्यंत चाचणी केलेले FF, Chrome, IE11).
माझ्या प्रकल्पांमध्ये एक स्निपेट आहे:
फंक्शन बॅक(url) ( जर (history.length > 2) (// इतिहास रिक्त नसल्यास, मागे जा: window.History.back(); ) अन्यथा (url) ( // निर्दिष्ट फॉलबॅक url वर जा: विंडो .History.replaceState(null, null, url); ) इतर ( // घरी जा: window.History.replaceState(null, null, "/"); )
FYI: मी ब्राउझर इतिहास व्यवस्थापित करण्यासाठी History.js वापरत आहे.
history.length ची संख्या 2 शी का तुलना करायची? कारणमुख्यपृष्ठ
ब्राउझरच्या इतिहासात Chrome हा पहिला घटक मानला जातो.
- history.length आणि वापरकर्ता वर्तन यासाठी अनेक शक्यता आहेत:
- वापरकर्ता नवीन रिक्त ब्राउझर टॅब उघडतो आणि नंतर पृष्ठ लाँच करतो. history.length = 2 आणि आम्ही या प्रकरणात back() अक्षम करू इच्छितो कारण वापरकर्ता रिक्त टॅबवर जाईल.
- वापरकर्ता आधी कुठेतरी लिंकवर क्लिक करून नवीन टॅबमध्ये पृष्ठ उघडतो. history.length = 1 आणि पुन्हा आम्हाला back() पद्धत अक्षम करायची आहे. आणि शेवटी वापरकर्त्याला मिळतेवर्तमान पृष्ठ
अनेक पृष्ठे रीलोड केल्यानंतर. history.length > 2 आणि आता back() सक्षम केले जाऊ शकते.
टीप: लक्ष्य="_blank" शिवाय बाह्य साइटवरील दुव्यावर क्लिक केल्यावर वापरकर्ता वर्तमान पृष्ठावर उतरतो तेव्हा मी केस गमावत आहे.
टीप 2: जेव्हा तुम्ही वेबसाइट उघडता तेव्हा document.referrer रिकामा असतो आणि जेव्हा वेबसाइट उपपृष्ठे लोड करण्यासाठी ajax वापरते, तेव्हा मी पहिल्या प्रकरणात हे मूल्य तपासणे थांबवले.
history.length निरुपयोगी आहे कारण वापरकर्ता इतिहासात परत जाऊ शकतो की नाही हे सूचित करत नाही. तसेच भिन्न ब्राउझर 0 किंवा 1 ची प्रारंभिक मूल्ये वापरतात - ते ब्राउझरवर अवलंबून असते.
$(window).on("foreunload" इव्हेंट वापरणे हा एक कार्यरत उपाय आहे, परंतु मला खात्री नाही की जर पृष्ठ ajax द्वारे लोड केले असेल आणि विंडोचा इतिहास बदलण्यासाठी pushState वापरला असेल तर ते कार्य करेल.
Var currentUrl = window.location.href; window.history.back(); setTimeout(function())( // जर 100 ms मध्ये स्थान बदलले नाही, तर परत इतिहास नसेल if(currentUrl === window.location.href)( // साइट रूट window.location.href = "वर पुनर्निर्देशित करा / "; ) ), १००);
window.history.length सह सावधगिरी बाळगा कारण त्यात window.history.forward() साठीच्या नोंदी देखील आहेत
त्यामुळे तुमच्याकडे 1 पेक्षा जास्त नोंदी असलेल्या window.history.length असू शकतात, परंतु इतिहासाच्या नोंदी नाहीत. याचा अर्थ तुम्ही window.history.back() चालवल्यास काहीही होणार नाही
मी खालील दृष्टिकोन घेऊन आलो. ब्राउझर पृष्ठ सोडतो की नाही हे निर्धारित करण्यासाठी ते onbeforeunload इव्हेंट वापरते. ठराविक कालावधीत ते बॅकअप कॉपीवर पुनर्निर्देशित न केल्यास.
Var goBack = फंक्शन goBack(fallback)( var useFallback = true; window.addEventListener("foreunload", function())( useFallback = false; )); setTimeout(function())( if (Fallback वापरा )( window.location.href = फॉलबॅक; ) ), 100 )
तुम्ही goBack("fallback.example.org") वापरून या फंक्शनला कॉल करू शकता.
window.location.pathname तुम्हाला वर्तमान URI देईल. उदाहरणार्थ, https://domain/question/1234/i-have-a-problem /question/1234/i-have-a-problem परत करेल. window.location बद्दल दस्तऐवज पहा
नंतर स्प्लिट() कॉल केल्याने त्या URI चे सर्व तुकडे मिळतील. म्हणून जर आपण आपला पूर्वीचा URI घेतला तर आपल्याकडे ["", "प्रश्न", "1234", "i-have-a-problem"] असे काहीतरी असेल. अधिक माहितीसाठी String.prototype.split() वरील दस्तऐवजीकरण पहा.
येथे filter() कॉल बॅकस्लॅशद्वारे तयार केलेल्या रिक्त स्ट्रिंगला फिल्टर करण्यासाठी आहे. ते फक्त URI खंड परत करेल ज्याची लांबी 1 (रिक्त नसलेली स्ट्रिंग) पेक्षा जास्त आहे. तर आपल्याकडे ["प्रश्न", "१२३४", "आय-हेव-ए-प्रश्न"] असे काहीतरी असेल. हे असे लिहिले जाऊ शकते:
"कडक वापरा"; window.location.pathname.split("/").filter(function(fragment) ( return fragment.length > 0; ));
अधिक माहितीसाठी Array.prototype.filter() आणि Destructuring उद्देशाविषयी दस्तऐवज पहा.
आता, https://domain/ वर असताना वापरकर्त्याने परत येण्याचा प्रयत्न केल्यास, आम्ही if स्टेटमेंट चालवणार नाही आणि म्हणून वापरकर्त्याला आमच्या वेबसाइटवर ठेवण्यासाठी window.history.back() पद्धतीला कॉल करणार नाही. ही URL 0 आणि 0 > 0 असत्य असलेल्या URL च्या समतुल्य असेल. परिणामी, ते शांतपणे अयशस्वी होते. अर्थात, तुमची इच्छा असल्यास तुम्ही काहीतरी नोंदणी करू शकता किंवा दुसरी क्रिया करू शकता.
"कडक वापरा"; function previousPage() ( if (window.location.pathname.split("/").filter((( length )) => length > 0).length > 0) ( window.history.back(); ) बाकी ( इशारा("तुम्ही यापुढे मागे जाऊ शकत नाही...");
निर्बंधअर्थात, जर ब्राउझर हिस्ट्री API ला सपोर्ट करत नसेल तर हा उपाय कार्य करणार नाही. हे उपाय वापरण्यापूर्वी याबद्दल अधिक जाणून घेण्यासाठी दस्तऐवजीकरण तपासा.
हा लेख HTML5 चा उद्देश प्रकट करतो इतिहास API. या API पूर्वी, आम्ही बऱ्याचदा भारी, सिंगल-पेज ॲप्लिकेशन्ससह काम करण्यासाठी हॅश व्हॅल्यूज वापरत असू कारण पेज रिफ्रेश केल्याशिवाय ईमेल ॲड्रेस बदलणे शक्य नव्हते. याव्यतिरिक्त, जेव्हा तुम्ही ईमेल पत्त्यासाठी हॅश मूल्य बदलता, तेव्हा तुमच्या ब्राउझर इतिहासामध्ये कोणतेही बदल केले जात नाहीत.
तथापि, आता, HTML5 इतिहास API मुळे दोन्ही ऑपरेशन्स उपलब्ध आहेत. आम्ही आता हॅश व्हॅल्यू न वापरता सिंगल पेज ॲप्लिकेशन तयार करू शकतो. हे आम्हाला एसइओ फ्रेंडली असलेले ॲप्लिकेशन्स तयार करण्यास देखील अनुमती देते. याव्यतिरिक्त, हे तंत्र आपल्याला रहदारी कमी करण्यास अनुमती देते - परंतु कसे?
या लेखात आम्ही एकल पृष्ठ अनुप्रयोग विकसित करू. हे करण्यासाठी, आम्ही पहिल्या पृष्ठावरील सर्व आवश्यक संसाधने डाउनलोड करू. हे आम्हाला भविष्यात फक्त आवश्यक सामग्री लोड करण्यास अनुमती देईल. दुसऱ्या शब्दांत, त्यानंतरच्या विनंत्यांदरम्यान, सतत सर्व संसाधने डाउनलोड करण्याऐवजी, अनुप्रयोग केवळ आवश्यक माहिती डाउनलोड करेल.
सामग्री पाठवणे सर्व्हरच्या बाजूने केले जाणे आवश्यक आहे.
ब्राउझर समर्थनया लेखनाच्या वेळी, HTML5 हिस्ट्री API ब्राउझरद्वारे चांगले समर्थित आहे. तथापि, स्क्रिप्टच्या अगदी सुरुवातीला आम्ही एक चेक तयार करू. हे ब्राउझरची सुसंगतता तपासेल.
तुमचा ब्राउझर API ला सपोर्ट करतो की नाही हे प्रोग्रामॅटिकरित्या निर्धारित करण्यासाठी, खालील चाचणी वापरा:
परत !!(window.history && history.pushState);
जर तुम्ही Modernizr वापरत असाल, तर चेक खालीलप्रमाणे असेल:
जर (Modernizr.history) ( // History API समर्थित )
जर तुमचा ब्राउझर History API ला सपोर्ट करत नसेल, तर तुम्ही history.js polyfill वापरू शकता.
इतिहासाशी संवादया फंक्शन्सचा वापर करून, तुम्ही इतिहासाची स्थिती जोडू आणि अपडेट करू शकता. ते जवळजवळ एकसारखे कार्य करतात आणि पॅरामीटर्सचा समान संच स्वीकारतात. याव्यतिरिक्त, आम्ही आणखी एका कार्याचा उल्लेख करू शकतो: popstate. आम्ही त्यांना थोड्या वेळाने कृती करताना पाहू.
पुशस्टेट आणि रिप्लेस स्टेट फंक्शन्स समान संख्येची पॅरामीटर्स घेतात:
- JSON फॉरमॅटमध्ये स्टेट स्ट्रिंग.
- शीर्षक सध्या सर्व ब्राउझरने दुर्लक्षित केले आहे म्हणून ते शून्य वर सेट करणे चांगले आहे.
- url कोणत्याही ईमेल पत्त्याचे प्रतिनिधित्व करते. हे मूल्य ब्राउझरमध्ये अद्यतनित केले जाईल. काही फरक नाही, आहे दिलेली URLकिंवा नाही. सर्वात महत्वाची गोष्ट म्हणजे पृष्ठ रीलोड केले जाणार नाही.
या पद्धतींमधील फरक असा आहे की पुशस्टेट इतिहासात नवीन एंट्री जोडेल, तर रिप्लेसस्टेट वर्तमान मूल्य पुनर्स्थित करेल. उदाहरण वापरून ही फंक्शन्स कशी कार्य करतात ते पाहू.
समजा आमच्याकडे स्टॅकवर 1 आणि 2 नावाचे अनेक ब्लॉक्स आहेत. आमच्याकडे ब्लॉक 3 देखील आहे. जेव्हा आम्ही pushState कमांड कार्यान्वित करतो, तेव्हा ब्लॉक 3 विद्यमान स्टॅकवर ढकलला जाईल. परिणामी, त्यात 3 ब्लॉक असतील.
आता त्याच परिस्थितीची कल्पना करा. रिप्लेसस्टेट फंक्शन कार्यान्वित झाल्यावर, ब्लॉक 2 च्या जागी ब्लॉक 3 नेले जाईल. अशा प्रकारे, ब्लॉक्सची संख्या समान राहील.
एक स्पष्ट उदाहरण:
history.go किंवा history.back पद्धती वापरून इतिहासात फिरताना पॉपस्टेट पद्धत काढून टाकली जाईल. वेबकिट ब्राउझरमध्ये, पॉपस्टेट कमांड नंतर चालेल ऑनलोड इव्हेंट, परंतु हे Firefox आणि IE ला लागू होत नाही.
उदाहरणे: HTMLपुशस्टेट पद्धत वापरून इतिहास API वापर पाहण्यासाठी वरील लिंकवर क्लिक करा.
घर!
Lorem Ipsum हा मुद्रण आणि टाइपसेटिंग उद्योगाचा फक्त डमी मजकूर आहे.JavaScript
jQuery("document").ready(function())( jQuery(".historyAPI").on("क्लिक", फंक्शन(e)( e.preventDefault(); var href = $(this).attr(" href "); // सामग्री मिळवणे getContent(href, true); jQuery(".historyAPI").removeClass("active"); $(this).addClass("active"); ));)); // ब्राउझर बॅक बटण विंडो हाताळण्यासाठी पॉपस्टेट इव्हेंट श्रोता जोडणे.addEventListener("popstate", function(e) ( // e.state getContent(location.pathname, false); ) वापरून राज्य मूल्य मिळवा;फंक्शन getContent(url, addEntry) ( $.get(url) .done(function(data) ( // पृष्ठावरील सामग्री अपडेट करत आहे $("#contentHolder").html(data); if(addEntry == true) ( / / pushState history.pushState(null, null, url) ) वापरून इतिहास एंट्री जोडा;
नमस्कार, प्रिय वाचकांनो! आजचा लेख HTML5 इतिहास API सह कार्य करण्यावर लक्ष केंद्रित करेल. HTML च्या मागील आवृत्त्यांमध्ये आमच्याकडे होतेHTML5 इतिहास API वापरून ब्राउझर इतिहास हाताळण्याचा एक प्रमाणित मार्ग आहे. या API चा भाग, इतिहास नेव्हिगेशन, HTML च्या मागील आवृत्त्यांमध्ये उपलब्ध होता. HTML5 मध्ये ब्राउझरच्या ॲड्रेस बारमधील URL दृश्यमानपणे बदलण्यासाठी (पृष्ठ रीफ्रेश न करता) ब्राउझर इतिहास नोंदी जोडण्याची आणि ब्राउझरच्या इतिहासातील वर्तमान प्रविष्टी पुनर्स्थित करण्याची क्षमता समाविष्ट आहे. याचा अर्थ असा की ब्राउझरच्या ॲड्रेस बारमधील URL वर्तमान संसाधनासाठी एक अद्वितीय ओळखकर्ता राहते, अगदी सह अनुप्रयोगांमध्ये देखील मोठ्या संख्येनेस्क्रिप्ट ज्या बऱ्याचदा अंमलात आणल्या जात नाहीत पूर्ण अद्यतनपृष्ठे
ब्राउझर समर्थनसध्या, हे API अनेक ब्राउझरद्वारे समर्थित आहे. आपण याबद्दल अधिक जाणून घेऊ शकता.
API समर्थित आहे की नाही हे प्रोग्रामेटिकरित्या निर्धारित करण्यासाठी, वापरा:
जर तुमचा ब्राउझर API ला सपोर्ट करत नसेल किंवा तुम्ही क्रॉस-ब्राउझर सोल्यूशन शोधत असाल तर तुम्ही history.js प्लगइन वापरू शकता. HTML5 इतिहास API च्या शीर्षस्थानी तयार केलेले आणि जुन्या ब्राउझरमधील कार्यप्रदर्शनाची चिंता न करता समान पद्धती वापरते.
API पद्धती आणि गुणधर्म
पुशस्टेट पद्धतीने काम करण्याचे उदाहरण पाहू. समजा जवळजवळ समान सामग्री असलेली 3 पृष्ठे आहेत. मार्कअप असे दिसते:
1 |
|
आम्ही मेनू क्लिक कसे हाताळू ते येथे आहे:
1 | $("दस्तऐवज" ) .तयार (फंक्शन () ( // पॉपस्टेट इव्हेंट हँडलर जोडा, // सामग्री लोड करण्याचे कार्य |
पुशस्टेट पद्धत वापरताना सर्वकाही कसे घडते ते दृश्यमानपणे पाहण्यासाठी तुम्ही डेमो पृष्ठावर जाऊ शकता. किंवा स्त्रोत डाउनलोड करा आणि प्रयोग करा.
अलीकडे पर्यंत, आम्ही डेव्हलपर ब्राउझरची स्थिती आणि इतिहासासह बरेच काही करू शकत नव्हतो. आम्ही इतिहासातील आयटमची संख्या तपासू शकतो आणि वापरकर्त्यांना पुढे आणि मागे ढकलू शकतो, परंतु यामुळे वापरकर्त्याला फारसा फायदा होत नाही. अधिक डायनॅमिक वेब पृष्ठांच्या वाढीसह, आम्हाला अधिक नियंत्रणाची आवश्यकता आहे. कृतज्ञतापूर्वक, HTML5 आम्हाला JavaScript इतिहास API वाढवून ते नियंत्रण देते.
मुद्दा काय आहे?URL महत्त्वाच्या आहेत हे न सांगता. ते आहेत दवेबवरील माहिती आणि संसाधनांच्या विशाल संग्रहात प्रवेश करण्याची पद्धत आणि अगदी अलीकडे, त्यांनी वेब अनुप्रयोगाच्या इच्छित स्थितीचे प्रतिनिधित्व करण्यास सुरुवात केली आहे. तुम्ही या URL कॉपी करू शकता आणि ते तुमच्या मित्रांसह शेअर करू शकता किंवा कोणत्याही HTML दस्तऐवजातून लिंक तयार करण्यासाठी त्यांचा वापर करू शकता. त्या वेबच्या नसा आहेत आणि त्यांची काळजी घेणे आवश्यक आहे.
पूर्वी, JavaScript History API ने काही अतिशय सोपी कार्यक्षमता ऑफर केली होती:
// हिस्ट्री स्टॅकची लांबी तपासा console.log(history.length); // वापरकर्ता एजंटला पाठवा console.log(history.forward()); // वापरकर्ता एजंटला परत पाठवा console.log(history.back()); // वापरकर्ता एजंटला परत पाठवा (नकारात्मक) किंवा फॉरवर्ड (पॉझिटिव्ह) // दिलेल्या संख्येने आयटम console.log(history.go(-3));
डायनॅमिक Ajax वेब ऍप्लिकेशन्ससह, जेथे ब्राउझर संपूर्णपणे स्थान बदलण्याऐवजी पृष्ठास भागांमध्ये अद्यतनित करतो, वापरकर्त्यास वर्तमान अनुप्रयोग स्थिती बुकमार्क करण्यासाठी किंवा सामायिक करण्यासाठी URL देणे कठीण आहे. फ्रॅगमेंट आयडेंटिफायर, जसे की या लेखाच्या शीर्षकांवर id विशेषता द्वारे वापरले जातात, काही राज्य माहिती देतात, परंतु ते पूर्णपणे क्लायंट-साइड स्क्रिप्टवर अवलंबून असतात.
ही फाईल सेव्ह करा आणि तुमच्या आवडत्या एडिटरमध्ये उघडा. हे HTTP द्वारे प्रवेश करणे आवश्यक आहे, म्हणजे तुम्हाला एकतर स्थानिक सर्व्हरची आवश्यकता आहे (उदा. http://localhost/) किंवा ऑनलाइन वेबआपण अपलोड करू शकता सर्व्हर. तुमच्या ब्राउझरचे ओपन फाइल फंक्शन वापरून थेट फाइल पाहणे कार्य करणार नाही, कारण ती फाइल:// प्रोटोकॉल वापरते आणि HTTP नाही. योग्य निर्देशिकेची रचना वापरली आहे याची खात्री करण्यासाठी प्रत्येक नेव्हिगेशन लिंकवर href विशेषता अपडेट करण्याचे सुनिश्चित करा. वैयक्तिकरित्या, मी http://localhost/history येथे स्थानिकरित्या डेमो पाहत आहे.
आम्ही च्या शेवटी घटकामध्येच कार्य करू. कोडमध्ये काही सोप्या शैलींचा समावेश आहे आणि तुम्ही लिंक्सवर क्लिक करताच सामग्री डायनॅमिकरित्या बदलते. प्रत्यक्षात, हे तुमच्या सर्व्हरवरून XMLHttpRequest द्वारे लोड केले जाऊ शकते, परंतु या प्रात्यक्षिकाच्या उद्देशाने मी ते एका स्वयं-समाविष्ट फाइलमध्ये एकत्रित केले आहे. महत्त्वाचा भाग असा आहे की आमच्याकडे काम करण्यासाठी एक द्रुत-आणि-घाणेरडे डायनॅमिक पृष्ठ आहे, त्यामुळे मजा सुरू करू द्या!
या क्षणी, या पृष्ठाच्या विविध राज्यांसाठी बुकमार्क करण्यायोग्य URL नाही. जर तुम्ही नेव्हिगेशन आयटमवर क्लिक केले, तर तुमच्या ब्राउझरमध्ये परत क्लिक करा, तुम्हाला पूर्वीच्या स्थितीत नेले जाणार नाही आणि तुम्ही आधी पाहिलेल्या पृष्ठावरून दूर नेले जाईल (तुमच्या ब्राउझरवर अवलंबून). तुम्ही तुमच्या मित्रांसोबत “सॉक्स” शेअर करू शकलात तर छान होईल, बरोबर? आम्ही ते history.pushState() द्वारे करू शकतो.
history.pushState() पद्धत तीन पॅरामीटर्स घेते:
डेटा इतिहास आयटमला नियुक्त केलेला काही संरचित डेटा, जसे की सेटिंग्ज किंवा सामग्री. शीर्षक ब्राउझरच्या बॅक आणि फॉरवर्ड बटणांद्वारे दर्शविलेल्या इतिहास ड्रॉप-डाउनमधील आयटमचे नाव. (टीप: हे सध्या कोणत्याही प्रमुख ब्राउझरद्वारे समर्थित नाही.) url(पर्यायी)
या स्थितीची URL जी ॲड्रेस बारमध्ये प्रदर्शित केली जावी.
या पॅरामीटर्ससह, तुम्ही पृष्ठाची स्थिती परिभाषित करू शकता, त्या स्थितीला नाव देऊ शकता आणि बुकमार्क करण्यायोग्य पत्ता देखील देऊ शकता, जसे की पृष्ठ पूर्णपणे रीलोड झाले आहे. चला उजवीकडे जाऊ आणि रिटर्न स्टेटमेंटच्या अगदी वर क्लिकहँडलर फंक्शनमध्ये हे जोडू:
फंक्शन क्लिकहँडलर(ई) ( /* स्निप... */ // हिस्ट्री लॉग हिस्ट्रीमध्ये एक आयटम जोडा. pushState(data, event.target.textContent, event.target.href); रिटर्न event.preventDefault(); )
- आम्ही जोडलेली कोडची एकल ओळ इतिहास ऑब्जेक्टला सूचित करते की:
- आम्हाला लॉगमध्ये एक आयटम जोडायचा आहे,
- आम्ही आधीच लोड केलेला डेटा लक्षात ठेवला पाहिजे,
- आम्ही क्लिक केलेल्या दुव्याच्या मजकुराच्या आधारावर या राज्याला नाव नियुक्त केले पाहिजे (जरी हे वापरले जात नाही - राज्यासाठी नाव नोंदवण्याची सवय लावणे चांगले आहे), आणि
तुमच्या ब्राउझरमध्ये पेज रीलोड करा आणि ॲड्रेस बारवर लक्ष ठेवून काही लिंक्सवर क्लिक करा. आपण या पृष्ठापासून दूर नेव्हिगेट करत नसलो तरीही प्रत्येक क्लिकवर ते कसे बदलते याकडे लक्ष द्या. तुम्ही तुमचा इतिहास लॉग देखील पाहिल्यास, तुम्हाला पृष्ठ शीर्षकांची एक लांबलचक सूची दिसेल (या प्रकरणात "मांजरीचे पिल्लू!" वारंवार). प्रवेश केल्यावर योग्य पृष्ठ देण्यासाठी तुमचा सर्व्हर सेट केला असेल तर, वापरकर्ता ती URL कॉपी करू शकतो आणि थेट त्या मांजरीच्या पिल्लाकडे जाण्यासाठी नवीन ब्राउझर विंडोमध्ये पेस्ट करू शकतो.
याक्षणी, बॅक बटणावर क्लिक केल्याने तुम्हाला इतिहासातील आयटम दिसतील, परंतु पृष्ठ या बदलांवर प्रतिक्रिया देणार नाही. कारण आतापर्यंत आम्ही फक्त इतिहासाच्या नोंदी तयार केल्या आहेत. आम्ही सक्रिय वापरकर्त्यांना मागील स्थितीत परत येण्याची परवानगी कशी देऊ शकतो? आम्ही पॉपस्टेट इव्हेंट ऐकतो.
नेव्हिगेशनमधील ऐतिहासिक घटनावापरकर्ता एजंट पॉपस्टेट इव्हेंट फायर करतो जेव्हा वापरकर्ता त्याच्या इतिहासात नेव्हिगेट करतो, मग ते मागे किंवा पुढे, जर ते वापरकर्त्याला वर्तमान पृष्ठापासून दूर नेत नसेल. म्हणजेच, आम्ही कॉल केलेले सर्व पुशस्टेट वापरकर्त्यास वर्तमान पृष्ठावर ठेवतील, त्यामुळे पॉपस्टेट इव्हेंट प्रत्येक इतिहास आयटमसाठी फायर होईल ज्याद्वारे ते पॉप करतात.
क्लोजिंग टॅग करण्यापूर्वी, पॉपस्टेट इव्हेंटसाठी नवीन श्रोता जोडा:
// पूर्वी जतन केलेल्या स्थितीवर परत जा window.addEventListener("popstate", function(event) ( console.log("popstate fired!"); updateContent(event.state); ));
आम्ही इव्हेंट श्रोता विंडोशी संलग्न करतो, जो इव्हेंट फायर करण्यासाठी जबाबदार असतो आणि हा इव्हेंट आमच्या हँडलरला पास करतो. आम्ही मेसेज लॉग करतो (जेणेकरून हा कार्यक्रम कधी सुरू होतो ते आम्ही पाहू शकतो) आणि नंतर आम्ही पूर्वी जतन केलेली स्थिती वापरून सामग्री अद्यतनित करतो. राज्य हे राज्य मालमत्तेद्वारे इव्हेंट ऑब्जेक्टशी संलग्न आहे.
तुमच्या ब्राउझरमध्ये पृष्ठ ताजे उघडा, पूर्वीसारखे क्लिक करा आणि नंतर परत क्लिक करा. पूर्वीप्रमाणे, ॲड्रेस बारमधील URL तुम्ही राज्यांतून फिरत असताना बदलते, परंतु आता सामग्री देखील ती कशी असावी यावर पुनर्संचयित केली जाते. पुढे क्लिक करा आणि सामग्री त्याचप्रमाणे योग्यरित्या पुनर्संचयित केली जाईल.
तुम्ही पहिल्यांदा पेज लोड केल्यावर तुम्ही Chrome मधील डेव्हलपर कन्सोल पाहिल्यास, तुम्ही लिंकवर क्लिक करण्यापूर्वी लगेचच पॉपस्टेट इव्हेंट फायर झालेला दिसेल. याचे कारण असे की Chrome प्रारंभिक पृष्ठ लोडला स्थितीत बदल मानते आणि त्यामुळे तो इव्हेंट फायर करतो. या उदाहरणात, स्टेट प्रॉपर्टी null आहे, परंतु कृतज्ञतापूर्वक updateContent फंक्शन याच्याशी संबंधित आहे. विकसित करताना हे लक्षात ठेवा कारण ते तुम्हाला पकडू शकते, विशेषत: इतर ब्राउझरने हे वर्तन गृहीत धरल्यास.
इतिहासाचे पुनर्लेखनदुर्दैवाने, HTML5 सारखे विलक्षण आहे, ते आम्हाला वास्तविक वेळ प्रवास करण्याची परवानगी देत नाही. तसे झाल्यास, मी माझ्या लहानपणी परत जाईन आणि माझ्या लहान मुलाला सांगेन, "हो, तुझ्याकडे केकचा तुकडा असावा." तुम्हाला वाटेल तसे घ्या.
तथापि, इतिहास API आम्हाला आमच्या इतिहास लॉग आयटममध्ये सुधारणा करण्यास अनुमती देते. उदाहरणार्थ, फॉर्ममधील नवीन वापरकर्त्याच्या इनपुटला प्रतिसाद म्हणून आम्ही वर्तमान स्थिती अद्यतनित करू शकतो. आपण हे history.replaceState सह करू शकतो.
रिप्लेसस्टेट पुशस्टेटप्रमाणेच कार्य करते, अगदी त्याच पॅरामीटर्ससह, ते नवीन जोडण्याऐवजी वर्तमान एंट्री अद्यतनित करते. मी आमच्या डेमोमधील एका परिस्थितीचा विचार करू शकतो जिथे हे वापरले जाऊ शकते: प्रारंभिक पृष्ठ लोड. तुम्ही बराच वेळ परत क्लिक केल्यास, तुम्हाला आढळेल की मूळ URL वर परत गेल्याने तुम्हाला मूळ सामग्री मिळत नाही. आमच्या स्क्रिप्टच्या तळाशी खालील जोडून त्याचे निराकरण करूया:
// प्रारंभिक सामग्री संग्रहित करा जेणेकरून आम्ही त्यास नंतर पुन्हा भेट देऊ शकू history.replaceState(( content: contentEl.textContent, फोटो: photoEl.src ), document.title, document.location.href);
पृष्ठ लोड झाल्यावर हे चालते, ते प्रारंभिक पृष्ठ स्थिती जतन करते. जेव्हा आम्ही आधी सेट केलेल्या इव्हेंट श्रोताद्वारे वापरकर्ता या बिंदूवर परत ब्राउझ करतो तेव्हा आम्ही ही स्थिती नंतर लोड करू शकतो. तुम्ही पेज लोड करून, काही लिंक्सवर क्लिक करून आणि नंतर तुम्ही मूळ URL वर परत येईपर्यंत परत दाबून ते वापरून पाहू शकता. प्रारंभिक सामग्री परत आली आहे!
डेमोमी आमच्या पूर्ण केलेल्या कोडचा डेमो सेट केला आहे. आमची history.pushState URL खऱ्या साइटप्रमाणे काम करण्यासाठी मी थोडी बॅक-एंड जादू देखील जोडली आहे. लक्षात ठेवा की तुम्ही पुश करत असलेल्या URL लाइव्ह URL असाव्यात ज्या वापरकर्ता तुमच्या साइटवर रिअल एंट्री पॉइंट म्हणून बुकमार्क आणि शेअर करू शकतो.
ब्राउझर समर्थनChrome (5+), सफारी (5.0+), Firefox (4.0+), आणि Opera (11.50+) च्या अद्ययावत प्रतींना नवीन इतिहास API साठी समर्थन आहे. काही मोबाइल ब्राउझर देखील अगदी चांगले काम करतात, जसे मोबाईल सफारी iOS 4+ वर. दुर्दैवाने, IE 9 आणि त्याखालील समर्थनाचा अभाव आहे, परंतु ते आल्यावर.
Safari 5.0 कधीकधी एक विचित्रता प्रदर्शित करते: राज्यांमध्ये नेव्हिगेट केल्याने लोडिंग स्पिनर दिसून येतो आणि राज्य लोड केले गेले असताना देखील ते राहतात. जेव्हा तुम्ही हिस्ट्री API द्वारे सेव्ह केलेली स्थिती समाविष्ट नसलेली लिंक किंवा कृती वापरून नेव्हिगेट करता तेव्हा हे थांबते.
पॉलीफिलइतिहास API साठी एक पॉलीफिल अस्तित्वात आहे. हिस्ट्री एपीआय ची नक्कल करण्यासाठी दस्तऐवज फ्रॅगमेंट आयडेंटिफायरसह HTML4 चा हॅशचेंज इव्हेंट वापरते. हॅश URL पैकी एखादे आधुनिक ब्राउझर वापरत असल्यास, ते URL शांतपणे दुरुस्त करण्यासाठी रिप्लेस स्टेट वापरते.
हे जादूसारखे वाटते, परंतु या लेखात आधी नमूद केल्याप्रमाणे, तुकडा अभिज्ञापक वापरण्याचे परिणाम तुम्हाला माहीत आहेत याची खात्री करा. म्हणून, History.js च्या लेखकाने इंटेलिजेंट स्टेट हँडलिंग नावाचे मार्गदर्शक एकत्र केले आहे.
विचार बंद करणेURL फक्त वापरकर्त्याच्या ब्राउझिंग सत्राच्या पलीकडे जातात. ते संसाधनांसाठी ऐतिहासिकदृष्ट्या महत्त्वाचे चिन्हक आहेत जे पुढील अनेक वर्षे वापरात राहू शकतात. तुम्ही तुमच्या साइटची JavaScript विकसित करण्याआधी, तुम्ही तुमच्या URL च्या डिझाइनचा विचार केला पाहिजे. त्यांना अर्थपूर्ण आणि संघटित करा. तुम्ही JavaScript शिवाय त्यांच्यात थेट प्रवेश करू शकता याची खात्री करा. त्यानंतरच ब्राउझिंग अनुभव वाढवण्यासाठी तुम्ही तुमची JavaScript जोडली पाहिजे.
- श्रेणी
मी अक्षरशः *फक्त* हे शोधले आणि दोन आठवड्यांपूर्वी एका क्लायंटसाठी यावर काम केले. मला हे किती छान वाटले म्हणून मी याबद्दल ब्लॉग लिहिण्याचा विचारही केला. हे खरोखर एक गेम चेंजर असू शकते.
मला आश्चर्य वाटते की तुम्ही history.state वैशिष्ट्य कव्हर केले नाही? माझा विश्वास आहे की हे सध्याचे वैशिष्ट्य आहे, जरी ते फक्त फायरफॉक्समध्ये कार्य करते. येथे वापरलेला कोड, तो कार्य करत असताना, मला वाटले की स्पेसच्या मूळ आवृत्तीचा भाग आहे. तसेच, नमूद करण्यासारखे आहे की तुम्ही तुमच्या उदाहरणाप्रमाणे JavaScript ऑब्जेक्टमध्ये *पास होणे* अपेक्षित आहे. मायक्रोसॉफ्टच्या IE ब्लॉगमध्ये अशी उदाहरणे आहेत जिथे स्ट्रिंग पास केली जाते. मी ब्राउझरवर यावरील समर्थनाची चाचणी केली नाही, परंतु हे उल्लेख करण्यासारखे आहे.
मी अक्षरशः तुम्हाला सांगू शकत नाही की संपूर्ण किती तास "प्रारंभिक सामग्री संग्रहित करा जेणेकरून आम्ही नंतर पुन्हा भेट देऊ शकू" समस्या माझ्यासाठी एक समस्या बनली. तुम्ही ज्या डीफॉल्ट स्थितीत आला आहात ती इतिहासाच्या स्टॅकमध्ये नाही हे मला अज्ञानी वाटते.
मी इंटरनेट एक्सप्लोरर 9 वर डेमो पृष्ठ वापरून पहात आहे आणि मी Chrome ला काही फरक सांगू शकत नाही म्हणून ते कार्य करते असे दिसते.
मी निश्चितपणे हा लेख भविष्यातील प्रकल्पासाठी वापरणार आहे. धन्यवाद!
तुमचा अनुभव शेअर केल्याबद्दल धन्यवाद, खूप माहितीपूर्ण.
बनावट URL हाताळण्यासाठी तुम्ही सर्व्हरवर काय केले ते तुम्ही कृपया स्पष्ट करू शकाल का? ते तुम्ही घातलेले मॅन्युअल रीडायरेक्ट आहेत की स्वयंचलित पुनर्लेखन? त्यांचे रूपांतर कसे होते?
खूप खूप धन्यवाद!
मधल्या काळात मी त्याच विषयावर थोडा पुढे गेलो. तुमचा वेब सर्व्हर Apache असल्यास, तुम्ही ते mod_rewrite वापरण्यासाठी कॉन्फिगर करू शकता, जे वापरकर्त्याने (किंवा क्रॉलर) टाइप केलेल्या URL ला इतर सर्व्हर साइड URL मध्ये रूपांतरित करू देते:
हे तुमच्या वेबसाइटच्या रूटवर .htaccess मध्ये अनेक नियम जोडून केले जाते.
अक्षरशः, नुकतीच माझी नवीन साइट रिलीझ केली जी या तंत्राचा वापर करते. हे सुंदरपणे कार्य करते!
भविष्यातील अजाक्स-आधारित साइट्सवर हॅश आणि हॅशबँग्स दूर करण्यास सक्षम असणे (कदाचित) छान आहे.
हे अधिक व्यापकपणे दत्तक घेतल्याने हे कसे वापरले जाते हे पाहण्यासाठी मी खरोखर उत्सुक आहे.
याच्या क्रॉस-ब्राउझर अंमलबजावणीसह केवळ समस्या उद्भवतात (जसे बहुतेकदा होते). तुम्ही नमूद केलेल्या ब्राउझरद्वारे हिस्ट्री API समर्थित असू शकते परंतु यशाच्या वेगवेगळ्या प्रमाणात.
Ben Lupton ची History.js (कॅपिटल 'H' लक्षात ठेवा) येथे पहा:https://github.com/balupton/History.js/ जे craoos ब्राउझरच्या विसंगतींसाठी लेखांकन करताना HTML5 इतिहास स्थिती वापरण्याचे साधन देते.
पुन्हा, छान लेख. खरोखर मूलभूत तत्त्वे खाली नाही.
हे छान आहे, परंतु जर ते IE9 किंवा त्याखालील वर कार्य करत नसेल तर ते सध्या उत्पादन साइटसाठी निरुपयोगी आहे (बरेच गोंधळलेल्या हॅक आणि फॉलबॅकशिवाय!)
@राफेल+एरिक:
उशीरा उत्तर दिल्याबद्दल माफी मागतो! डेमोच्या हेतूंसाठी, मी एक अतिशय मूलभूत mod_rewrite आणि PHP सेटअप वापरला.
पुनर्लेखन नियम ^(फ्लफी|सॉक्स|व्हिस्कर्स|बॉब)$ index.php?p=$1
उपरोक्त पुनर्लेखन नियम डेमो URLs मास्क करतो आणि वापरकर्ता कोणती मांजर पाहण्याचा प्रयत्न करीत आहे याच्या क्वेरी स्ट्रिंगसह एका PHP फाइलमध्ये पास करतो. PHP फाइल नंतर $_GET["p"] वैध आहे हे तपासते (नेहमी स्वच्छ करा आणि योग्य म्हणून तुमचे इनपुट तपासा), नंतर मी त्या मांजरीसाठी सेट केलेले पूर्व-परिभाषित व्हेरिएबल्स वापरून.
जर हा एक वास्तविक अनुप्रयोग असेल तर, विनंती केलेला मार्ग अधिक गतिशील सामग्री खेचण्यासाठी डेटाबेस क्वेरी (अर्थातच सॅनिटाइज्ड) तयार करण्यासाठी वापरला जाऊ शकतो. वर्डप्रेस सारखे CMS त्यांच्या "स्वच्छ URL" अंमलबजावणीसाठी असे काहीतरी वापरतात.
आशा आहे की हे मदत करेल.
ती htaccess फाइल जवळून पाहणे शक्य होईल का. mod_rewrite व्यतिरिक्त, इतिहास api भागामध्ये येथे चाललेले सर्व काही मला समजते. तुमच्याकडे या प्रत्येक भिन्न मांजरीसाठी कुठेतरी अधिक पृष्ठे आहेत का? आपण काही मांजरींवर क्लिक केल्यानंतर पृष्ठ रीफ्रेश केल्याने त्रुटी आढळले नाही असे पृष्ठ मिळते. मी गहाळ असलेल्या htaccess भागाशी याचा संबंध आहे, बरोबर? धन्यवाद.
खराब ब्राउझर सपोर्टबद्दल वरील माझी टिप्पणी असूनही मी http://goproheroes.com साठी हॅश केलेल्या URL (/#/slug) वरून HTML5 इतिहासावर स्विच करण्याचा निर्णय घेतला आणि IE9 आणि खाली वापरून सामान्य पृष्ठ लोडिंगवर परत येण्याचा निर्णय घेतला:
फंक्शन supports_history_api() (
परत !!(window.history && history.pushState);
}
धन्यवाद माइक, तुमच्या डेमोने मला मदत केली. माझा प्रयत्न आवश्यकतेपेक्षा थोडा अधिक क्लिष्ट होता.
तथापि, मी माझ्या पृष्ठावर योग्य संक्रमणे जोडू शकेन म्हणून वापरकर्ता इतिहासातून कधी पुढे आणि मागे जातो याचा मागोवा घेण्याचा आणि शोधण्याचा प्रयत्न करत आहे. दुर्दैवाने, पॉपस्टेट इव्हेंटवर फॉरवर्ड किंवा बॅक बटण क्लिक केले असल्यास इतिहास API तुम्हाला कळू देत नाही. ते खरोखर उपयुक्त होईल.
मला वाटते की ऑर्डर ट्रॅक करण्याचा प्रयत्न करण्याचा कुकी हा एकमेव मार्ग असू शकतो. स्टेट ऑब्जेक्टमध्ये पूर्वीचे व्हेरिएबल सेव्ह केल्याने गुंतागुंतीचे झाले आणि ब्राउझरच्या समस्या निर्माण झाल्या.
यादीत जोडून,
धन्यवाद माईक!
त्या मोहक मांजरीच्या पिल्लांनी मला माझ्या साइटच्या लवकरच रिलीझ होणाऱ्या नवीन आवृत्तीवर काही पुशिंग आणि पॉपिंग फंक्शन्स सेट करण्यात मदत केली!
tut साठी धन्यवाद!
तुमच्या क्लिकहँडलर फंक्शनमध्ये तुमच्या पोस्ट कोडमध्ये काहीतरी चूक आहे (तरीही किटीलँडवर ठीक आहे):
1. इव्हेंट ऑब्जेक्ट वितर्कांवर "e" म्हणून घोषित केले जाते, "इव्हेंट" नाही.
2. कोणतीही अद्यतन सामग्री नाही(); कुठेही! मी काही चुकीचे करत आहे का हे पाहण्यासाठी मला तुमचा कार्यरत स्त्रोत तपासावा लागला.
पण थांबा, अजून आहे! ...काही अद्यतने देखील:
3. क्रोम 19+ इव्हेंट आणि सामग्रीच्या राज्य मालमत्तेत मिसळण्यास सुरवात करते.
टीप म्हणून: Chrome ची स्थिती पॉप करण्याची उत्सुकता वगळण्यासाठी मी इव्हेंट श्रोत्याला बांधण्यासाठी लंगडा setTimeout() वापरला.
