Js में URL एंकर परिवर्तन घटना को हैंडल करें

Question

मैं जावास्क्रिप्ट कॉलबैक कोड कैसे लिख सकता हूं जिसे URL एंकर में किसी भी बदलाव पर निष्पादित किया जाएगा?

से उदाहरण के लिए http://example.com#aकरने के लिएhttp://example.com#b

Answer 1

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

निम्नलिखित जैसा कुछ प्राप्त होता है:

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
        storedHash = window.location.hash;
        hashChanged(storedHash);
    }
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6 और इंटरनेट एक्सप्लोरर 8 सभीhashchange घटना का समर्थन करते हैं :

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

और इसे एक साथ रखना:

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

jQuery में एक प्लगइन भी है जो हैशचेंज इवेंट के लिए जाँच करेगा और यदि आवश्यक हो तो अपना स्वयं का प्रदान करेगा - http://benalman.com/projects/jquery-hashchange-plugin/ ।

संपादित करें : अद्यतन ब्राउज़र समर्थन (फिर से)।

Comments

पूर्णता के var storedHash = window.location.hash;लिए, पुट-इट-टू-समरी ब्लॉक में जोड़ें। Btw: आजकल यह पॉलीफ़िल मुझे लगता है कि कहा जाता है।

— फ्रैंक नोके

आजकल आप stackoverflow.com/questions/6390341/how-to-detect-url-changehashChangewindow

— Timo Huovinen

@AndyE मैंने जवाब पढ़ा, मैं छोटे नोट से चूक गया, और मैंने कभी भी ऐसी घटनाओं को नहीं देखा है जो दिखती हैंhashChanged(storedHash);

— टिमो हुओवेनन

@TimoHuovinen:, hashChangedइस मामले में, इस कोड का उपयोग करके एक डेवलपर द्वारा कार्यान्वित एक फ़ंक्शन होने का इरादा है। यहां जवाब केवल यह दर्शाता है कि कोई व्यक्ति उन बदलावों के लिए हैश की निगरानी नहीं कर सकता है जहां onhashchangeघटना उपलब्ध नहीं है, और एक सार्वभौमिक समाधान प्रदान करने के लिए घटना-आधारित और टाइमर-आधारित दृष्टिकोण को जोड़ती है। मेरा कहना यह है कि आप जिस उत्तर से जुड़े हैं, उसका उत्तर यहाँ कुछ भी नहीं है;; वे एक ही बुनियादी जानकारी प्रदान करते हैं, यहां तक ​​कि बेन अलमान के jQuery प्लगइन का लिंक भी। अंतर केवल इतना है कि मैंने अपने जवाब में शुद्ध जेएस समाधान प्रदान किया।

— एंडी ई

मैं कुछ हल्के जेएस राउटर की तलाश में था, लेकिन इसने अच्छी तरह से काम किया। इसके अलावा सभी निर्भरताएं समाप्त कर

— दीं

Answer 2

मैं addEventListenerओवरराइटिंग के बजाय उपयोग करने की सलाह window.onhashchangeदूंगा, अन्यथा आप अन्य प्लगइन्स के लिए ईवेंट को ब्लॉक कर देंगे।

window.addEventListener('hashchange', function() {
...
})

आज वैश्विक ब्राउज़र के उपयोग को देखते हुए, एक गिरावट की आवश्यकता नहीं है।

Answer 3

setInterval()अभी के लिए केवल सार्वभौमिक समाधान है। लेकिन हैशचेंज इवेंट के रूप में भविष्य में कुछ प्रकाश हैं

Comments

FYI करें: onhashchangeईवेंट का प्रलेखन मोज़िला डेवलपर नेटवर्क पर

Answer 4

मैं अन्य एसओ प्रश्नों में जो देखता हूं, उसमें से केवल काम करने योग्य क्रॉस-ब्राउज़र समाधान टाइमर है। की जाँच करें इस सवाल उदाहरण के लिए।

Answer 5

(सिर्फ रिकॉर्ड के लिए।) YUI3 "हैशचेंज" सिंथेटिक घटना कमोबेश एक ही बात को स्वीकार किए गए उत्तर के रूप में करती है।

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});

Answer 6

आप इससे अधिक जानकारी प्राप्त कर सकते हैं

उत्परिवर्तन घटना प्रकार

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

Comments

यह DOM परिवर्तनों के बारे में है।

— राज