पृष्ठ के बिना हैश या फिर से लोड किए बिना नए URL के साथ पता बार अपडेट करना

643

मैंने या तो क्रोम (देव चैनल) के बारे में सपना देखा था, जो पेज को फिर से लोड किए बिना जावास्क्रिप्ट (पथ, डोमेन नहीं) के माध्यम से एड्रेस बार को अपडेट करने का एक तरीका लागू करता है या उन्होंने वास्तव में ऐसा किया है।

हालाँकि, मुझे लगता है कि मैं जो लेख पढ़ता हूं वह मुझे नहीं मिल सकता है ।

क्या मैं पागल हूं या ऐसा करने का कोई तरीका है (क्रोम में)?

ps मैं window.location.hash, et al के बारे में बात नहीं कर रहा हूं। यदि ऊपर मौजूद है तो इस प्रश्न का उत्तर असत्य होगा।

javascript ajax google-chrome

— डेविड मर्डोक
स्रोत

3

पृष्ठ को पुनः लोड किए बिना URL को संशोधित करने

— Tobias Kienzler

1

@tobiaskienzler जब यह सवाल मूल रूप से 2009 में वापस पूछा गया था, तो यह संभव नहीं था।

— डेविड मर्डोक

3

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

— टोबियास किन्ज़लर

@tobiaskienzler, अन्य प्रश्न का पुराना उत्तर नहीं है।

— डेविड मर्डोक

2

@TobiasKienzler यह 6 साल पुराना सवाल है, आपको इस सवाल से क्यों परेशान होना है? बस अद्भुत जवाब का आनंद लें और इसे अपने आवेदन पर लागू करें। 6 साल के लिए हजारों SO उपयोगकर्ताओं ने सहमति व्यक्त की कि यह एक अद्भुत सवाल है, कृपया इसे वैसे ही छोड़ दें।

— इमाम असिदिक़्की

874

अब आप इसे सबसे "आधुनिक" ब्राउज़रों में कर सकते हैं!

यहाँ मूल लेख है जो मैंने पढ़ा (10 जुलाई, 2010 को पोस्ट किया गया): एचटीएमएल 5: ब्राउज़र-URL को बिना ताज़ा किए पेज बदलना ।

अधिक गहराई से पुशस्टेट / रिप्लेसस्टेट / पॉपस्टेट (उर्फ एचटीएमएल 5 हिस्ट्री एपीआई) में एमडीएन डॉक्स देखें ।

टीएल; डीआर, आप यह कर सकते हैं:

window.history.pushState("object or string", "Title", "/new-url");

मूल हाउ-टू के लिए पृष्ठ को फिर से लोड किए बिना URL को संशोधित करने के लिए मेरा उत्तर देखें ।

— डेविड मर्डोक
स्रोत

3

आह, कार्यक्षमता वेबकीट में है और कुछ महीनों पहले उतरा < Bugs.webkit.org/show_bug.cgi?id=36152 >। अच्छा लगा!

— पुराना लॉयलिंगबॉय

6

इसका उपयोग अब जीथब द्वारा किया जाता है, जबकि वृक्ष नेविगेशन

— वलेरिज

1

@Vprimachenko: हाँ। और वे हर बार एक समय में मेरे बैक बटन को तोड़ते हैं।

— डेविड मर्डोक

यह अब Chrome, Safari, FF4 + और IE10pp3 + में किया जा सकता है! (डेविड मर्डोक के जवाब से stackoverflow.com/questions/824349/… पर )

— Zach Lysobey

11

Protip: आप इन कार्यों के साथ रिश्तेदार रास्तों का उपयोग कर सकते हैं (जैसे ../new-urlया ../../new-url। वे ऐसा करने के लिए कम से कम क्रोम में उम्मीद करेंगे।

— Mahn

156

केवल पुराने हैश के बाद क्या बदल रहा है

document.location.hash = 'lookAtMeNow';

पूरा URL बदलना। क्रोम, फ़ायरफ़ॉक्स, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

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

history.replaceState('data to be passed', 'Title of the page', '/test');

अब इन्हें कंसोल में चलाने का प्रयास करें!

— पावेल
स्रोत

13

replaceStateवास्तव में मुझे जो चाहिए था, मूल प्रतिक्रिया पर विस्तार के लिए धन्यवाद।

— चॉयलटन बी। हिगिनबॉटम

'डोमेन और प्रोटोकॉल मूल के समान होना चाहिए!' यह कुछ मछली पकड़ने की साइट को पता बार यूआरएल बदलने के लिए रोकता है।

— रिक

3

आपको इस फ़ंक्शन के लिए एक निरपेक्ष URL पास नहीं करना चाहिए। यदि आप करते हैं, तो आपको वर्तमान योजना, होस्ट, और पोर्ट से इसे गतिशील रूप से बनाने की आवश्यकता है - जो कि बहुत काम है जब आप इसे केवल एक रिश्तेदार URL ("foo.html" या यहां तक कि "/foo.html" बना सकते हैं ") और ब्राउज़र को इसका ध्यान रखना चाहिए।

— DimeCadmium

1

@DimeCadmium अच्छा सरलीकरण। अपडेट किया गया।

— पावेल

history.replaceStateइतिहास में जोड़ें ff 66.0b1

— azzamsa

33

Davids के अपडेट से उन ब्राउज़र का भी पता लगाने का जवाब मिलता है जो पुशस्टेट का समर्थन नहीं करते हैं:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

— metamagikum
स्रोत

9

document.location.href पृष्ठ को पुनः लोड करता है

— paulb

1

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

— केविन मेंडेज़
स्रोत

3

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— 18

@MaxiMouse आपकी गंभीरता के लिए धन्यवाद, मैं इसे ध्यान में रखूंगा।

— केविन मेंडेज़