क्या पेज को रीफ्रेश किए बिना ब्राउजर का एड्रेस बार बदलने का कोई तरीका है?

Question

मैं एक वेब ऐप विकसित कर रहा हूं। इसमें मेरे पास श्रेणियां नामक एक वर्ग है जो हर बार उपयोगकर्ता उन श्रेणियों में से एक पर क्लिक करता है जो अपडेट पैनल उपयुक्त सामग्री को लोड करता है।

उपयोगकर्ता द्वारा श्रेणी पर क्लिक करने के बाद मैं ब्राउज़र का पता बार यूआरएल बदलना चाहता हूं

www.mysite.com/products 

जैसे कुछ

www.mysite.com/products/{selectedCat} 

पेज को रिफ्रेश किए बिना।
क्या इसे प्राप्त करने के लिए किसी तरह की जावास्क्रिप्ट एपीआई का उपयोग किया जा सकता है?

Answer 1

HTML5 के साथ आप पुनः लोड किए बिना url को संशोधित कर सकते हैं:

यदि आप ब्राउज़र के इतिहास में एक नया पोस्ट करना चाहते हैं (यानी बैक बटन काम करेगा)

window.history.pushState('Object', 'Title', '/new-url');

यदि आप बस वापस जाने के लिए बिना url बदलना चाहते हैं

window.history.replaceState('Object', 'Title', '/another-new-url');

वस्तु का उपयोग अजाक्स नेविगेशन के लिए किया जा सकता है:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

यहां पढ़ें: http://www.w3.org/TR/html5-author/history.html

एक पतन का शोक: https://github.com/browserstate/history.js

Comments

+1 भी नोट करें; pathऔर / या query stringURL में ये परिवर्तन ; वे प्रोटोकॉल, डोमेन, या पोर्ट नहीं बदल सकते हैं (जैसा कि एक सुरक्षा समस्या होगी क्योंकि अन्य लोगों ने बताया है)। hashसमारोह ऊपर लंगर (या टुकड़ा आईडी) को बदल सकते हैं

— क्रिस एस

केवल यह कहते हुए, आपके उदाहरण '/ आइटम / 35'} में, एक अतिरिक्त} जोड़ा गया है

— Zhanger

एक साइड सवाल के रूप में, क्या इन URL को Google में अनुक्रमित करने के लिए सक्षम करने का कोई तरीका है?

— पीटर फेदरस्टोन

एक बेहतर पुस्तकालय github.com/browserstate/history.js लगता है कि यह सक्रिय रूप से बनाए रखा गया है और व्यापक रूप से उपयोग किया जाता है जबकि 3 साल के लिए किले-इतिहास। जेएस निष्क्रिय था।

— गोन्फी डेन Tschal

कृपया ध्यान दें कि फ़ायरफ़ॉक्स शीर्षक का समर्थन नहीं करता है, इसलिए document.title = "new title" का उपयोग करें।

— 0

Answer 2

जो लोग पहले ही कह चुके हैं उन्हें जोड़ने के लिए अपने ऑनक्लिक फ़ंक्शन में URL से मेल खाने के लिए window.location.hash संपत्ति को संपादित करें।

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

Comments

URL में '#' प्रतीक के बिना url बदलने का कोई तरीका है?

— शेखर षेटे

Answer 3

मेरा मानना ​​है कि बिना किसी सुरक्षा पते के उस एड्रेस बार में सीधे तौर पर अलग-अलग यूआरएल में हेरफेर करने से सुरक्षा कारणों की अनुमति नहीं है, यदि आप बिना किसी कारण के साथ हैं

www.mysite.com/products/#{selectedCat}

यानी एक ही पेज के भीतर एक एंकर स्टाइल लिंक फिर विभिन्न इतिहास / "बैक बटन" स्क्रिप्ट्स पर गौर करें जो अब अधिकांश जावास्क्रिप्ट लाइब्रेरी में मौजूद हैं।

अद्यतन पैनल का उल्लेख मुझे लगता है कि आप asp.net का उपयोग कर रहे हैं, उस स्थिति में asp.net ajax इतिहास नियंत्रण शुरू करने के लिए एक अच्छी जगह है

Answer 4

मुझे नहीं लगता कि यह संभव है (कम से कम पूरी तरह से अलग पते पर बदल रहा है), क्योंकि यह पता बार का एक अनपेक्षित दुरुपयोग होगा, और फ़िशिंग हमलों को बढ़ावा दे सकता है।

Comments

अनजाने में होने के बजाय, मुझे लगता है कि आपको ऐसा करने में सक्षम होना चाहिए क्योंकि फ़िशिंग हमलों के लिए इसका दुरुपयोग किया जा सकता है। वैसे भी, वह +1 है।

— ओरेगनगॉस्ट

हां, यह मेरे साथ हुआ। अच्छा विचार नहीं। धन्यवाद ओरेगनगॉस्ट।

— गेलव

मुझे लगता है कि यह संभव है ... विकिमपिया की जाँच करें ... जैसा कि आप नक्शे को चारों ओर खींचते हैं, URL बदल जाता है ...

— शिवसुब्रमण्यम A

@ शिवसुब्रमण्यन-अ: मैंने विकिमेपिया को देखा, और वास्तव में, वे बस किसी न किसी द्वारा सुझाई गई तकनीक का उपयोग करते हैं और सेंचोफेफ्ट द्वारा वर्णित है: बस लंगर का नाम बदल रहा है। जो फ़िशिंग के खिलाफ सुरक्षित है ...

— फीलो

Answer 5

यह उस तरह से नहीं किया जा सकता जैसा आप कह रहे हैं। Somej.net द्वारा सुझाई गई विधि वह निकटतम है जो आप प्राप्त कर सकते हैं। यह वास्तव में AJAX उम्र में बहुत आम है। यहां तक ​​कि जीमेल भी इसका इस्तेमाल करता है।

Answer 6

"Window.location.hash"

जैसा कि sanchothefat ने सुझाव दिया है कि इसे करने का एक और एकमात्र तरीका होना चाहिए। क्योंकि जिन सभी स्थानों पर मैंने यह सुविधा देखी है, यह सभी URL में # के बाद का समय है।