क्या आप इतिहास को प्रभावित किए बिना हैश नेविगेशन का उपयोग कर सकते हैं?


100

मुझे डर है कि यह असंभव हो सकता है, लेकिन क्या ब्राउज़र के इतिहास में एक प्रविष्टि छोड़ने के बिना और फिर से लोड किए बिना URL के हैश मूल्य को बदलने का एक तरीका है ? या समकक्ष?

जहाँ तक बारीकियों की बात है, मैं कुछ बुनियादी हैश नेविगेशन विकसित कर रहा था:

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs work
    $("#tabs.js-tabs a").live("click", function() {
        var showMe = $(this).attr("href");
        $(showMe).show();
        setHash(showMe);
        return false;
    });
    //hash nav on ready .. if hash exists, execute
    if ( getHash ){
        useHash(getHash);
    }

स्पष्ट रूप से jQuery का उपयोग करना। यह विचार यह है कि इस विशिष्ट उदाहरण में 1) उपयोगकर्ता को हर टैब परिवर्तन पर वापस जाने की आवश्यकता होती है, जो अनावश्यक संदर्भों को संकलित करके प्रभावी रूप से 'बैक बटन को तोड़ सकता है' और 2) वर्तमान में यदि वे ताज़ा हिट करते हैं तो वे किस टैब को बरकरार नहीं रखते हैं। एक झुंझलाहट।


यदि आप इतिहास ट्रैक नहीं रखना चाहते हैं तो आप हैश क्यों बदलना चाहते हैं? : |
इओनु

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

जवाबों:


95

location.replace("#hash_value_here");मेरे लिए तब तक ठीक काम किया जब तक मैंने यह नहीं पाया कि यह आईओएस क्रोम पर काम नहीं करता है। किस स्थिति में, उपयोग करें:

history.replaceState(undefined, undefined, "#hash_value")

history.replaceState () बिल्कुल history.pushState () को छोड़कर संचालित होता है, सिवाय इसके कि प्रतिस्थापन () एक नया बनाने के बजाय वर्तमान इतिहास प्रविष्टि को संशोधित करता है।

याद रखें कि #या url का अंतिम भाग बदल दिया जाएगा।


3
पूरी तरह से आधुनिक ब्राउज़रों के लिए जाने का रास्ता; हालांकि आंशिक समर्थन सत्र इतिहास प्रबंधन के बारे में पता होना चाहिए ।
मैट

मैं इसे कैसे उपयोग करने के लिए उलझन में हूँ। क्या मुझे अभी भी window.location.hash = 'my-hash';उसके बाद उपयोग करना चाहिए history.replaceState(undefined, undefined, "#my-hash")?
ब्रैम वनरॉय

2
@BramVanroy नहीं, बाद का उपयोग करना पर्याप्त है।
लूसिया

2
जब तक आप उपयोग नहीं करते हैं: चयनकर्ताओं को लक्षित करें ... तब इतिहास फ़ंक्शन बेकार हैं, क्योंकि कल्पना के उस हिस्से (इतिहास ऑप्स के साथ सीएसएस बातचीत) को वर्तमान में परिभाषित नहीं किया गया है, और शैली को इतिहास पर अधिकांश / सभी ब्राउज़रों द्वारा प्रतिस्थापित नहीं किया जाता है।
मॉर्फल्स

@Luxiyalu, किस तरह से history.replaceStateअलग हैlocation.replace ?
पेसियर

99
location.replace("#hash_value_here"); 

ऊपर वह कर रहा है जो आप कर रहे हैं।


4
यह बात है। और अगर आपके पास uri सेगमेंट हैं, तो location.replace (window.location + "#hash") उन्हें संरक्षित करेगा।
टेडर्स

7
इस विधि को, बहुत क्लीनर, काश यह सही जवाब के रूप में चिह्नित किया गया था।
जोएलिस

14
window.location.replace(('' + window.location).split('#')[0] + '#' + hash);सिर्फ hash अपडेट करने के लिए
johnstorm

1
मैं विंडोज 8 के तहत क्रोम 30 में इसका परीक्षण कर रहा हूं, अगर मैं क्रोम इतिहास पर जाता हूं और अपने परीक्षण यूआरएल के तहत "इस साइट से अधिक" का चयन करता हूं, तो मैं इस पद्धति के साथ जोड़े गए सभी हैश देख सकता हूं।
एलेक्स वांग

1
उस स्थान से सावधान रहें ।replace ('# hash_value_here') केवल हैश के टुकड़े को बदल देता है और पथ को नहीं, इसलिए यह पृष्ठ लोड को ट्रिगर नहीं करता है .... सिवाय जब दस्तावेज़ में आधार टैग होता है: <base href ="http://example.com/" /> यदि इसमें आधार टैग शामिल नहीं है , तब जब आप केवल एक अग्रणी के साथ प्रतिस्थापित विधि का उपयोग करते हैं तो "#hash_value_here"यह वास्तव में ऐसा होगा जैसे कि आपने कहा है कि 'location.replace (' example.com/#hash_value_here ' )। जब आप इसे यहाँ पढ़ते हैं, तो यह स्पष्ट प्रतीत होता है, लेकिन एक गेटा होता है जब आप एक पृष्ठ पर होते हैं एक पथ के टुकड़े के साथ और एहसास नहीं होता है कि आधार निर्धारित है।
टायलर कस्टेन

6

संपादित करें: अब कुछ साल हो गए हैं, और ब्राउज़र विकसित हो गए हैं।

@ लक्सियालु का जवाब जाने का रास्ता है

- पुराना उत्तर -

मुझे भी लगता है कि यह असंभव है (इस समय)। लेकिन अगर आप इसका उपयोग नहीं करने जा रहे हैं, तो आपको हैश मान को बदलने की आवश्यकता क्यों है?

मेरा मानना ​​है कि प्रोग्रामर के रूप में हम हैश मान का उपयोग क्यों करते हैं इसका मुख्य कारण उपयोगकर्ता को हमारे पृष्ठों को बुकमार्क करना या ब्राउज़र इतिहास में एक स्थिति को सहेजना है। यदि आप इनमें से कुछ भी नहीं करना चाहते हैं, तो बस राज्य को एक चर में सहेजें, और वहां से काम करें।

मुझे लगता है कि हैश का उपयोग करने का कारण एक मूल्य के साथ काम करना है जो हमारे नियंत्रण से बाहर है। यदि आपको इसकी आवश्यकता नहीं है, तो इसका मतलब है कि आपके पास सब कुछ आपके नियंत्रण में है, इसलिए बस राज्य को एक चर में संग्रहीत करें और इसके साथ काम करें। (मुझे खुद को दोहराना पसंद है)

मुझे आशा है कि यह आपकी मदद करेगा। हो सकता है कि आपकी समस्या का आसान समाधान हो।

अद्यतन: इसके बारे में कैसे:

  1. पहले हैश को सेट करें, और सुनिश्चित करें कि यह ब्राउज़र इतिहास में सहेजा गया है।
  2. जब एक नया टैब चुना जाता है, तो ऐसा करें window.history.back(1), जो आपके पहले init हैश से इतिहास को वापस ले जाएगा।
  3. अब आप नया हैश सेट करते हैं, इसलिए टैबिंग केवल इतिहास में एक प्रविष्टि करेगा।

आपको शायद कुछ झंडे का उपयोग करना होगा, यह जानने के लिए कि क्या वर्तमान प्रविष्टि को वापस जाकर "हटा" दिया जा सकता है, या यदि आप पहले चरण को छोड़ देते हैं। और यह सुनिश्चित करने के लिए, कि "हैश" के लिए आपकी लोडिंग विधि निष्पादित नहीं होती है, जब आप मजबूर करते हैं history.back


यह बहुत संभव है कि कुछ बुनियादी है जो मुझे याद आ रही है (थकावट एक अच्छा बहाना है, मैं उसके साथ जाऊंगा) लेकिन क्या आप कह रहे हैं कि मैं एक चर सेट कर सकता हूं जो पुनः लोड होने पर इसके परिवर्तित मूल्य को बनाए रखेगा? इसके अलावा एक कुकी के साथ? (कुकीज़ किसी तरह overkill लगते हैं ..) शायद यह स्पष्ट नहीं था। मैं हैश मूल्य का उपयोग कर रहा हूँ - विशेष रूप से पुनः लोड पर। प्रतिक्रिया देने के लिये धन्यवाद!

मेरा स्पष्टीकरण स्पष्ट करने के लिए: यदि उपयोगकर्ता पुनः लोड करता है। यही हैश के लिए है। मैं अभी भी उनके सामान्य उपयोग (टैब को बदलने / क्लिक करने) में पुनः लोड से बचने की कोशिश कर रहा हूं।

ठीक है, इसलिए आप पुनः लोड करने के बाद जानकारी के लिए कुछ मूल्यों का उपयोग करेंगे। खैर दुर्भाग्य से, हैश मूल्य कुछ ब्राउज़र के इतिहास द्वारा उठाया जाएगा। यह कहने के लिए क्षमा करें, लेकिन मेरे विस्तार से, कुकीज़ आपका सबसे अच्छा दांव हैं। यदि आप कुछ ऐसा चाहते हैं जो ब्राउज़र इतिहास का पता नहीं लगाता है, लेकिन फिर से लोड करने के बाद, दुर्भाग्य से, कुकीज़ को बनाए रखने के लिए। यदि उपयोगकर्ता एक लिंक पर क्लिक कर रहा था, तो आप लिंक को एक क्वेरी ( ?mystate=greatness) होने के लिए सेटअप कर सकते हैं , भले ही इसके लिए ajax होने की आवश्यकता नहीं है, आप अनुरोध को प्रारंभ करते समय पढ़ने के लिए जावास्क्रिप्ट के लिए जानकारी को सहेज सकते हैं।
गुज्जर

हाँ, हैश पुनः लोड करने के बाद उपयोगकर्ता की जानकारी को सहेजने के लिए है, लेकिन आपके लिए समस्या यह है कि कुछ ब्राउज़र इतिहास में उन परिवर्तनों को बचाएंगे, बस वे जिस तरह से काम करते हैं ... :(
guzart

हाँ, लगता है कि तुम सही हो। ठीक है। (किसी अन्य विधि या किसी चीज़ से गलत साबित होना पसंद करेंगे।)

-1

आप हाइपरलिंक पर क्लिक ईवेंट को पकड़ने के लिए हमेशा ईवेंट श्रोता बना सकते हैं और e.preventDefault () में कॉलबैक फ़ंक्शन डालते हैं, जो ब्राउज़र को इतिहास में डालने से रोकना चाहिए।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.