पर - window.location.hash - बदलें?

Question

मैं नेविगेशन के लिए अजाक्स और हैश का उपयोग कर रहा हूं।

क्या window.location.hashइस तरह से बदले जाने की जाँच करने का कोई तरीका है ?

http://example.com/blah # 123 से http://example.com/blah # 456

यह काम करता है अगर मैं दस्तावेज़ लोड होने पर इसकी जांच करता हूं।

लेकिन अगर मेरे पास #hash आधारित नेविगेशन है तो यह काम नहीं करता है जब मैं ब्राउज़र पर बैक बटन दबाता हूं (इसलिए मैं blah # 456 से blah # 123 पर कूदता हूं)।

यह पता बॉक्स के अंदर दिखाता है, लेकिन मैं इसे जावास्क्रिप्ट के साथ नहीं पकड़ सकता।

Comments

इस jquery प्लगइन को चेकआउट करें: github.com/cowboy/jquery-hashchange

— Xavi

History.js HTML5 स्टेट मैनेजमेंट फ़ंक्शनलिटी का समर्थन करता है (इसलिए आपको अब हैश का उपयोग करने की आवश्यकता नहीं है!) और शालीनता से HTML4 ब्राउज़रों के लिए इसे नीचा दिखाता है। यह बॉक्स से बाहर jQuery, MooTools और प्रोटोटाइप का समर्थन करता है।

— बालुपटन

@balupton, वास्तव में हमें अभी भी उपयोगकर्ता को फीडबैक प्रदान करने के लिए हैश का उपयोग करने की आवश्यकता है कि एक "नया पृष्ठ" उसके इतिहास में डाला गया है, जब तक कि आप प्रतिक्रिया के रूप में यूआरएल-परिवर्तन का उपयोग नहीं करते हैं।

— पचेरियर

[हैशर] github.com/millermedeiros/hasher

— विष्णु रथ

हम्म ... मुझे लगता है कि आपको

— moar

Answer 1

वास्तव में ऐसा करने का एकमात्र तरीका है (और यह है कि 'वास्तव में यह कैसे करता है'), एक अंतराल निर्धारित करके जो वर्तमान हैश की जाँच करता रहता है, और इसकी तुलना में जो पहले था, उसकी तुलना में, हम ऐसा करते हैं और ग्राहकों को एक परिवर्तित सदस्यता लेते हैं। घटना है कि हम आग अगर हैश बदल जाता है .. अपने सही नहीं है, लेकिन वास्तव में ब्राउज़रों देशी इस घटना का समर्थन नहीं करते।

---

इस उत्तर को ताज़ा रखने के लिए अपडेट करें:

यदि आप jQuery का उपयोग कर रहे हैं (जो आज अधिकांश के लिए कुछ हद तक मूलभूत होना चाहिए) तो एक अच्छा समाधान यह है कि विंडो ऑब्जेक्ट पर हैशचेंज घटनाओं को सुनने के लिए jQuery आपको अपने इवेंट सिस्टम का उपयोग करके देता है।

$(window).on('hashchange', function() {
  //.. work ..
});

यहाँ अच्छी बात यह है कि आप कोड लिख सकते हैं, जिसे हैशचेंज सपोर्ट के बारे में भी चिंता करने की आवश्यकता नहीं है, हालांकि आपको कुछ जादू करने की आवश्यकता है, कुछ हद तक कम ज्ञात jQuery फीचर jQuery के विशेष आयोजनों के रूप में ।

इस सुविधा के साथ आपको अनिवार्य रूप से किसी भी घटना के लिए कुछ सेटअप कोड चलाने के लिए मिलता है, पहली बार कोई व्यक्ति किसी भी तरह से घटना का उपयोग करने का प्रयास करता है (जैसे कि घटना के लिए बाध्यकारी)।

इस सेटअप कोड में आप देशी ब्राउज़र समर्थन की जांच कर सकते हैं और यदि ब्राउज़र इसे मूल रूप से लागू नहीं करता है, तो आप बदलावों के चुनाव के लिए एक सिंगल टाइमर सेटअप कर सकते हैं और jQuery इवेंट को ट्रिगर कर सकते हैं।

यह आपके कोड को इस समर्थन समस्या को समझने की आवश्यकता से पूरी तरह से बाहर कर देता है, इस तरह की एक विशेष घटना का कार्यान्वयन तुच्छ है (एक साधारण 98% वर्किंग संस्करण प्राप्त करने के लिए), लेकिन ऐसा क्यों करें जब कोई और पहले से ही हो ।

Comments

IE8 करता है। अधिक आने के लिए

— सर्गेई इलिंस्की

नवीनतम फ़ायरफ़ॉक्स बिल्ड (3.6 अल्फा) अब देशी हैश बदले हुए घटना का भी समर्थन करता है: developer.mozilla.org/en/DOM/window.onhashchange यह निश्चित रूप से इस घटना की जाँच करने लायक है, लेकिन ध्यान दें कि IE8 आपको घटना बताएगा जब यह IE7 कंप्रेशर मोड में चल रहा है, तो मौजूद है। दुख की बात है कि घटना में आग नहीं लगी है .. आपको घटना के लिए जाँच करनी होगी और यह कि ब्राउज़र IE7 नहीं दिखता है .. आह (या घटना को ट्रिगर करने का प्रयास करें) IE की फ़ायरइनवेंट विधि के साथ)।

— meandmycode

लेखन के समय, WebKit भी आग उगलती है hashchange, जबकि सफारी (स्थिर) अभी तक नहीं है।

— झोलेस्टर

अभी तक एक और अपडेट जोड़ने के लिए, इस hashchangeघटना का अब व्यापक रूप से समर्थन किया गया है: caniuse.com/#search=hash

— Paystey

क्या मैं केवल वही हूं जो बेकार के jQuery के जवाब देता है?

— लुक

Answer 2

HTML5 एक hashchangeघटना निर्दिष्ट करता है । यह घटना अब सभी आधुनिक ब्राउज़रों द्वारा समर्थित है । निम्न ब्राउज़र संस्करणों में समर्थन जोड़ा गया था:

• इंटरनेट एक्सप्लोरर 8
• फ़ायरफ़ॉक्स 3.6
• क्रोम 5
• सफ़ारी ५
• ओपेरा 10.6

Comments

अपडेट: FF 5, Safari 5, और Chrome 12 जून 2011 तक इस घटना का समर्थन करते हैं।

— james.garriss

यहाँ हैशचेंज के लिए CanIUse पेज दिया गया है । यहाँ quirksmode पर हैशचेंज है । मामले की संवेदनशीलता के संबंध में IE समर्थन छोटी गाड़ी है।

— तोबू

@ सभी को, टिप्पणी अनुभाग में उत्तर के लिए संलग्न रखने की कोई आवश्यकता नहीं है - यही "संपादित करें" बटन है। :)

— माइकल मार्टिन-स्मकर

उपयोग:window.onhashchange = function() { doYourStuff(); }

— क्रिस

हैशचेंज इवेंट का MDN प्रलेखन ।

— डबोवाल

Answer 3

ध्यान दें कि इंटरनेट एक्सप्लोरर 7 और इंटरनेट एक्सप्लोरर 9 के मामले में ifयह स्टेटमेंट सही होगा (विंडोज़ में "ऑनशॉस्कैप" के लिए), लेकिन window.onhashchangeवसीयत कभी भी फायर नहीं करेगी, इसलिए हैश को स्टोर करना बेहतर है और हर 100 मिली सेकंड के बाद इसे चेक करें कि यह है या नहीं Internet Explorer के सभी संस्करणों के लिए।

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

EDIT - jQuery 1.9 के बाद से $.browser.msieसमर्थित नहीं है। स्रोत: http://api.jquery.com/jquery.browser/

Answer 4

आईई ब्राउजर्स में हिस्ट्री और window.location.hash से निपटने के लिए बहुत सारे ट्रिक्स हैं:

• जैसा कि मूल प्रश्न में कहा गया है, यदि आप पृष्ठ a.html # b से a.html # c पर जाते हैं, और फिर पिछला बटन दबाते हैं, तो ब्राउज़र को यह पता नहीं चलता कि पृष्ठ बदल गया है। मैं इसे एक उदाहरण के साथ कहता हूं: window.location.href 'a.html # c' होगा, भले ही आप a.html # b या a.html # c में हों।

• दरअसल, अगर पृष्ठ में पहले से ही पृष्ठ में तत्व # name=" #b "> 'और' <a name="#c"> 'मौजूद हैं, तो केवल a.html # b और a.html # c ही संग्रहित किए जाते हैं ।

• हालाँकि, यदि आप एक पृष्ठ के अंदर एक iframe डालते हैं, तो उस iframe में a.html # b से a.html # c पर नेविगेट करते हैं और फिर बैक बटन दबाते हैं, iframe.contentWindow.document.location.href अपेक्षाओं के अनुसार परिवर्तन।

• यदि आप अपने कोड में 'document.domain = something ' का उपयोग करते हैं, तो आप iframe.contentWindow.document.open () (और कई इतिहास प्रबंधक ऐसा करता है) तक पहुँच नहीं सकते हैं

मुझे पता है कि यह वास्तविक प्रतिक्रिया नहीं है, लेकिन हो सकता है कि IE-History नोट्स किसी के लिए उपयोगी हों।

Answer 5

फ़ायरफ़ॉक्स 3.6 के बाद से एक onhashchange घटना हुई है। देखें window.onhashchange ।

Answer 6

बेन एल्मन के पास इससे निपटने के लिए एक बेहतरीन jQuery प्लगइन है: http://benalman.com/projects/jquery-hashchange-plugin/

यदि आप jQuery का उपयोग नहीं कर रहे हैं तो यह विच्छेद के लिए एक दिलचस्प संदर्भ हो सकता है।

Comments

लगता है कि बेन अल्मन प्लगइन अब नहीं बना हुआ है। हालांकि कई कांटे हैं।

— Mnebuerquo

Answer 7

आप "window.location" ऑब्जेक्ट की "हैश" संपत्ति पर एक पर्यवेक्षक ("घड़ी" विधि) को आसानी से लागू कर सकते हैं।

ऑब्जेक्ट के परिवर्तनों को देखने के लिए फ़ायरफ़ॉक्स का अपना कार्यान्वयन है , लेकिन यदि आप कुछ अन्य कार्यान्वयन का उपयोग करते हैं (जैसे कि वॉच के लिए ऑब्जेक्ट गुण जावास्क्रिप्ट में बदलते हैं लिए) - अन्य ब्राउज़रों के लिए, तो यह चाल चलेगा।

कोड इस तरह दिखेगा:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

तब आप इसका परीक्षण कर सकते हैं:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

और निश्चित रूप से जो आपके पर्यवेक्षक फ़ंक्शन को ट्रिगर करेगा।

Comments

बेहतर उपयोग: window.location.href के बजाय window.location।

— कोडबीट

वह window.location.hash देख रहा है, window.location नहीं।

— अपरिभाषित

@BrianMortenson: डॉक्स ( developer.mozilla.org/en-US/docs/JavaScript/Reference/… ) के अनुसार, आपको watchउस ऑब्जेक्ट पर लागू होना चाहिए जो उस संपत्ति का मालिक है जो बदल रही है और आप उसे देखना चाहते हैं।

— gion_13

@ gion_13 हाँ, यह वही है जो मैं इंगित करना चाह रहा था। 'वह' से मेरा मतलब आपसे था, और यह इरविनस की टिप्पणी पर निर्देशित था। मुझे और अधिक स्पष्ट होना चाहिए था। आपकी स्पष्ट टिप्पणी के लिए धन्यवाद।

— अपरिभाषित

Answer 8

मैं URL को अलग-अलग मापदंडों को प्रदर्शित करने के लिए एक प्रतिक्रिया एप्लिकेशन में इसका उपयोग कर रहा था जो उपयोगकर्ता को देखने के आधार पर था।

मैंने हैश पैरामीटर का उपयोग करके देखा

window.addEventListener('hashchange', doSomethingWithChangeFunction());

फिर

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

एक इलाज का काम किया, आगे और पीछे ब्राउज़र बटन और ब्राउज़र इतिहास में भी काम करता है।

Comments

अपने में addEventListenerकॉल, आप निकाल देना चाहिए ()सेdoSomethingWithChangeFunction

— जेसन एस

क्या आप () हटाने के लिए कोई कारण बता सकते हैं? मुझे पता है कि यह या तो के साथ काम करेगा, और कम कोड ज्यादातर बेहतर विकल्प है, लेकिन यह picky लगता है जब तक कि इसे वापस करने का पर्याप्त कारण नहीं है?

— Sprose

? इसके साथ काम नहीं करना चाहिए ()। addEventListenerसमारोह में एक समारोह में पारित करने के लिए की आवश्यकता है। doSomethingWithChangeFunctionएक समारोह है। doSomethingWithChangeFunction()उस फ़ंक्शन का रिटर्न मान है, जो इस मामले में एक फ़ंक्शन नहीं है।

— जेसन एस

Answer 9

एक अच्छा कार्यान्वयन http://code.google.com/p/reallysimplehistory/ पर पाया जा सकता है । केवल (लेकिन यह भी) समस्या और बग यह है: Internet Explorer में स्थान हैश को मैन्युअल रूप से संशोधित करने से संपूर्ण इतिहास स्टैक रीसेट हो जाएगा (यह एक ब्राउज़र समस्या है और इसे हल नहीं किया जा सकता है)।

ध्यान दें, इंटरनेट एक्सप्लोरर 8 में "हैशचेंज" इवेंट के लिए समर्थन है, और चूंकि यह एचटीएमएल 5 का हिस्सा बन रहा है, इसलिए आप अन्य ब्राउज़रों को पकड़ने की उम्मीद कर सकते हैं।

Answer 10

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

साथ ही ध्यान देने योग्य एक और परियोजना jQuery Ajaxy है जो कि jQuery इतिहास के लिए अजाक्स को मिश्रण में जोड़ने के लिए बहुत अधिक विस्तार है। जब आप हैश के साथ अजाक्स का उपयोग शुरू करते हैं तो यह काफी जटिल हो जाता है !

Answer 11

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

यही है ... अब, जब भी आप अपनी पीठ या आगे के बटन दबाते हैं, तो पृष्ठ नए हैश मान के अनुसार पुनः लोड हो जाएगा।

Comments

eval strings का प्रयोग न करें

— Vitim.us

Answer 12

मैं अपने क्लाइंट साइड रूटिंग के लिए path.js का उपयोग कर रहा हूं। मैंने पाया है कि यह काफी रसीला और हल्का है (इसे एनपीएम के लिए भी प्रकाशित किया गया है), और हैश आधारित नेविगेशन का उपयोग करता है।

path.js एनपीएम

path.js गिटहब

Answer 13

मैंने एक jQuery प्लगइन, HUtil का उपयोग किया , और इसके ऊपर इंटरफ़ेस की तरह YUI इतिहास लिखा ।

इसे एक बार देख लें। अगर आपको मदद चाहिए तो मैं मदद कर सकता हूं।