एचटीएमएल 5/jQuery: पुशस्टेट और पॉपस्टेट - गहरी लिंकिंग?

Question

पहले बंद मुझे लगता है कि pushState फ़ंक्शन में पहला पैरामीटर क्या है? मैं इसे क्या पास करूं? मेरे पृष्ठ के माध्यम से स्क्रॉल करते समय मैं बस यूआरएल बदलना चाहता हूं। मैं व्यूपोर्ट में मौजूदा तत्व की आईडी से पूछताछ कर रहा हूं और इसकी आईडी यूआरएल में भी लिंक होना चाहिए। यह नीचे दिए गए कोड के साथ ठीक काम करता है।

1.) अभी पता-में यूआरएल को सफलतापूर्वक बदल जाता है जब मैं अपने पृष्ठ के माध्यम से स्क्रॉल:

var currentHash, 
     url; 

    if (history && history.pushState) { 

     $(window).scroll(function() { 
      hash = $('.layer:in-viewport').attr('id'); 
      catHash = $("#"+hash).parent('section').attr('id'); 

      var data = "nothing"; 

      if (catHash != undefined) 
       url = "/" + catHash + "/" + hash; 
      else 
       url = "/" + hash; 

      if (currentHash != hash) { 

       window.history.pushState(data, hash, url); 

      } 

      currentHash = hash; 

     }); 

    } 

अब मैं दो प्रश्न हैं। जब मैं प्रारंभ में पृष्ठ लोड करता हूं तो मैं एड्रेसबार में यूआरएल/हैश से कैसे पूछ सकता हूं। तो कल्पना करें कि अब मेरे पास www.url.com/deep जैसा लिंक है, मैं जानना चाहता हूं कि क्या/गहरा है? क्या मुझे बस पूरे शीर्ष पर पूछना है। स्थान और इसे प्रत्येक "/" पर विभाजित करना है? मेरा मतलब है कि वे लिंक वास्तव में मौजूद नहीं हैं, तो मैं पुशस्टेट फ़ंक्शन के साथ एक यूआरएल को कॉल करते समय 404 पृष्ठों से कैसे बचूं?

2.) बैक बटन पर क्लिक करते समय पता बार में अंतिम परिवर्तन कैसे प्राप्त कर सकता हूं? तो मैं ब्राउज़र बैक बटन पर क्लिक करते समय /deep खोजना चाहता हूं ताकि मैं पृष्ठ पर उस स्थिति पर वापस जा सकूं। मुझे लगता है कि यह शायद पॉपस्टेट के साथ काम कर रहा है लेकिन मुझे पता नहीं चला कि कैसे!

आपकी मदद के लिए धन्यवाद!

अद्यतन:

window.history.pushState("test", hash, url); 

...

$(window).bind('popstate', function(event){ 
     console.log(event.data); 
    }); 

यह alway रिक्त है। क्या यह वापस "परीक्षण" नहीं करना चाहिए?

Answer 1

पुशस्टेट फ़ंक्शन में पहला पैरामीटर क्या है?

the documentation से

राज्य वस्तु - राज्य वस्तु JavaScript ऑब्जेक्ट जो pushState द्वारा बनाई नया इतिहास प्रविष्टि() के साथ जुड़ा हुआ है। जब भी उपयोगकर्ता नए राज्य में जाता है, तो एक पॉपस्टेट ईवेंट निकाल दिया जाता है, और घटना की राज्य संपत्ति में इतिहास प्रविष्टि की स्थिति वस्तु की एक प्रति होती है।

तो यह आपकी पसंद के डेटा का एक बंडल है जिसे आप उस स्थिति में वापस आने पर वापस आते हैं।

अभी जब मैं अपने पृष्ठ से स्क्रॉल करता हूं तो एड्रेसबार में यूआरएल सफलतापूर्वक बदल जाता है। जब मैं प्रारंभ में पृष्ठ लोड करता हूं तो मैं एड्रेसबार में यूआरएल/हैश से कैसे पूछ सकता हूं।

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

बैक बटन पर क्लिक करते समय पता बार में अंतिम परिवर्तन कैसे प्राप्त कर सकता हूं?

आप एक घटना श्रोता (एक popState घटना की तलाश में) जोड़ सकते हैं और डेटा आप इसे में संग्रहीत घटना वस्तु पर उपलब्ध हो जाएगा। MDN has an example

Answer 2

jQuery बाहर सार घटना वस्तु, आप चाहते हैं: event.originalEvent.state;