जावास्क्रिप्ट का उपयोग करके नए पृष्ठ को लोड किए बिना ब्राउज़र में URL बदलें

Question

मेरे पास एक जावास्क्रिप्ट क्रिया कैसे होगी जो वर्तमान पृष्ठ पर कुछ प्रभाव डाल सकती है लेकिन ब्राउज़र में URL को भी बदल देगी ताकि यदि उपयोगकर्ता पुनः लोड या बुकमार्क को हिट करता है, तो नए URL का उपयोग किया जाता है?

यह भी अच्छा होगा यदि बैक बटन मूल URL को फिर से लोड करेगा।

मैं URL में जावास्क्रिप्ट स्थिति रिकॉर्ड करने का प्रयास कर रहा हूं।

Comments

यह कितना अच्छा होगा। बेशक यह समान-डोमेन संशोधनों तक सीमित होगा। लेकिन पथ के कुछ क्लाइंट-साइड नियंत्रण (और सिर्फ हैश नहीं) अब एक तार्किक कदम है कि पृष्ठ पुनः लोड कई एप्लिकेशन के लिए "अंतिम उपाय" का एक प्रकार है।

— हार्पो

एक "सॉर्ट-ऑफ" का अच्छा उपयोग pushState:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}

— डेरेक 會 功夫 '

कार्रवाई में इस आशय का उदाहरण: dujour.com

— बेन

इस आशय का उदाहरण: facebook.com (लाइटबॉक्स में चित्र खोलते समय)

यह अच्छा प्रश्न है। हालाँकि, इसकी एक दुखद स्थिति यह है कि अगर आज इस तरह से थिसिस प्रश्न पूछा गया होता, तो इसे "इस तरह की साइट नहीं मिलती है कि आप लोगों को आपके लिए अपना सारा कोड लिखने के लिए मिलें"।

— dewd

Answer 1

HTML 5 के साथ, history.pushStateफ़ंक्शन का उपयोग करें । उदहारण के लिए:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

और एक href:

<a href="#" id='click'>Click to change url to bar.html</a>

---

यदि आप बैक बटन सूची में प्रविष्टि जोड़े बिना URL बदलना चाहते हैं, तो history.replaceStateइसके बजाय उपयोग करें ।

Comments

आप सही हैं, पिछली बार मैंने क्रोम के साथ प्रयोग किया था। मैंने अभी अपने Ubuntu पर फ़ायरफ़ॉक्स 3.6 के साथ कोशिश की, यह काम नहीं किया। मुझे लगता है कि हमें HTML5 FF

— clu3

नमूना कोड डेवलपर . mozilla.org/en/DOM/Manipulating_the_browser_history से काटा और चिपकाया जाता है । जो वास्तव में समझाता है कि इस मामले में फू और बार का मतलब क्या है।

— मिकमेकाना

फू और बार का कोई मतलब नहीं है, यह एक मनमाने ढंग से परिभाषित राज्य वस्तु है जिसे आप बाद में वापस प्राप्त कर सकते हैं।

— पॉल डिक्सन

@Paul: हां, ऊपर दिया गया लेख यह जानकारी प्रदान करता है।

— 17

इस टिप्पणी को पोस्ट करने के रूप में यह फ़ायरफ़ॉक्स क्रोम और सफारी पर काम करता है। IPad या iphone पर मोबाइल सफारी के साथ कोई भाग्य नहीं है :(

— सिड

Answer 2

आप ब्राउज़रों कि समर्थन नहीं करते में काम करने के लिए यह चाहते हैं history.pushStateऔर history.popStateअभी तक, "पुराने" जिस तरह से टुकड़ा पहचानकर्ता है, जो एक पृष्ठ पुनः लोड का कारण नहीं बनेगा स्थापित करने के लिए है।

मूल विचार window.location.hashसंपत्ति को उस मूल्य पर सेट करना है जिसमें आपको जो भी राज्य की जानकारी की आवश्यकता होती है, उसके लिए या तो window.onhashchange घटना का उपयोग करें , या पुराने ब्राउज़रों के लिए जो समर्थन नहीं करते हैं onhashchange(IE <8, Firefox <3.6), समय-समय पर जांच करें देखें कि क्या हैश बदल गया है ( setIntervalउदाहरण के लिए) और पृष्ठ को अपडेट करें। प्रारंभिक सामग्री सेट करने के लिए आपको पृष्ठ लोड पर हैश मान की जांच करने की भी आवश्यकता होगी।

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

सावधान रहने वाली एक बात पृष्ठ पर आईडी से टकरा रही है, क्योंकि ब्राउज़र किसी भी तत्व को मिलान आईडी के साथ स्क्रॉल करेगा।

Comments

क्या खोज इंजन इन आंतरिक लिंक (हैश) को अनदेखा नहीं करते हैं? अपने परिदृश्य में मैं चाहता हूँ कि मकड़ियाँ इन कड़ियों को भी उठाएँ।

— ड्रू नोक

@ ड्रू, जहां तक ​​मुझे पता है, खोज इंजन के लिए एक पृष्ठ के एक हिस्से को एक अलग परिणाम के रूप में मानने का कोई तरीका नहीं है।

— मैथ्यू क्रूले

अब खोज इंजनों को हैश देखने का एक प्रस्ताव है: googlewebmastercentral.blogspot.com/2009/10/…

— LKM

setIntervalनिरीक्षण करने के लिए उपयोग करने के बजाय घटना का document.location.hashउपयोग कर सकते हैं hashchange, क्योंकि यह बहुत अधिक अपनाया गया है। यहां देखें कि कौन से ब्राउज़र प्रत्येक मानक का समर्थन करते हैं । मेरा वर्तमान तरीका उन ब्राउज़रों पर पुश / पॉपस्टेट का उपयोग करना है जो इसका समर्थन करते हैं। दूसरों पर मैंने हैश सेट किया और केवल hashchangeसहायक ब्राउज़रों में देखा। यह इतिहास के समर्थन के बिना IE <= 7 को छोड़ देता है, लेकिन उपयोगी पर्मलिंक के साथ। लेकिन IE <= 7 के लिए कौन परवाह करता है?

— इरा कार्वाल्हो

@gabeDel हाँ, हालाँकि मुझे नहीं लगता कि Analytics हैश को रिकॉर्ड करता है, इसलिए इसका URL समान होगा। एक बेहतर तरीका _trackPageviewनए पृष्ठ के "वास्तविक" URL के साथ मैन्युअल रूप से कॉल करना होगा ।

— मैथ्यू Crumley

Answer 3

window.location.href में वर्तमान URL है। आप इससे पढ़ सकते हैं, आप इसे संलग्न कर सकते हैं, और आप इसे बदल सकते हैं, जिससे पृष्ठ पुनः लोड हो सकता है।

यदि ऐसा लगता है, जैसा कि आप URL में जावास्क्रिप्ट स्टेट रिकॉर्ड करना चाहते हैं, तो इसे बुकमार्क किया जा सकता है, पृष्ठ को फिर से लोड किए बिना, इसे # के बाद वर्तमान URL में जोड़ें और ऑनलोड इवेंट द्वारा चालू जावास्क्रिप्ट का एक टुकड़ा है जो वर्तमान को पार्स करता है। URL यह देखने के लिए कि क्या इसमें सहेजी गई स्थिति है।

यदि आप एक का उपयोग करें? # के बजाय, आप पृष्ठ को पुनः लोड करने के लिए बाध्य करेंगे, लेकिन चूंकि आप लोड पर सहेजे गए राज्य को पार्स करेंगे, इसलिए यह वास्तव में समस्या नहीं हो सकती है; और यह आगे और पीछे बटन सही ढंग से काम करेगा।

Comments

URL में जावास्क्रिप्ट स्टेट रिकॉर्ड करना बिल्कुल वही है जो मैं करने की कोशिश कर रहा हूं

— स्टीवन नोबल

Answer 4

मुझे दृढ़ता से संदेह है कि यह संभव नहीं है, क्योंकि यह एक अविश्वसनीय सुरक्षा समस्या होगी। उदाहरण के लिए, मैं एक पेज बना सकता था जो बैंक लॉगिन पेज जैसा दिखता था, और एड्रेस बार में यूआरएल को वास्तविक बैंक की तरह बनाते हैं !

शायद अगर आप समझाते हैं कि आप ऐसा क्यों करना चाहते हैं, तो लोग वैकल्पिक तरीकों का सुझाव देने में सक्षम हो सकते हैं ...

[२०११ में संपादित करें: जब से मैंने २०० in में यह उत्तर लिखा है, HTML5 तकनीक के संबंध में अधिक जानकारी सामने आई है, जो URL को तब तक संशोधित करने की अनुमति देती है, जब तक वह उसी मूल से हो।]

Comments

यदि कोई गैर-पुनः लोड परिवर्तन पथ, क्वेरी स्ट्रिंग और खंड तक सीमित नहीं है, तो इसका कोई मुद्दा नहीं है - अर्थात प्राधिकरण (डोमेन और ऐसे) नहीं।

— ओली सॉन्डर्स

youtube.com/user/SilkyDKwan#p/u/2/gTfqaGYVfMg एक उदाहरण है कि यह संभव है, वीडियो स्विच करने का प्रयास करें :)

— Spidfire

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

— पॉल डिक्सन

क्या आप फ़ेसबुक का उपयोग करते हैं? फेसबुक URL को बिना लोड किए , उपयोग करके बदल देता है history.pushState()।

— डेरेक 會 功夫

पॉल डिक्सन, आपको फेसबुक इनबॉक्स पर ध्यान देना चाहिए, जब आप बाईं ओर नामों पर क्लिक करते हैं, तो बस URL बदल जाता है और चैट बॉक्स में नई चैट लोड होती है, पृष्ठ ताज़ा नहीं होता है।

— वेबलॉग

Answer 5

ब्राउज़र सुरक्षा सेटिंग्स लोगों को सीधे प्रदर्शित यूआरएल को संशोधित करने से रोकती हैं। आप फ़िशिंग भेद्यता का कारण बन सकते हैं।

केवल पृष्ठों को बदलने के बिना यूआरएल को बदलने का विश्वसनीय तरीका एक आंतरिक लिंक या हैश का उपयोग करना है। उदाहरण के लिए: http://site.com/page.html हो जाता है http://site.com/page.html#item1 । इस तकनीक का उपयोग अक्सर हिजैक्स (AJAX + संरक्षित इतिहास) में किया जाता है।

ऐसा करते समय, मैं अक्सर हैश के साथ क्रियाओं के लिंक का उपयोग href के रूप में करता हूँ, फिर jquery के साथ क्लिक इवेंट जोड़ें जो क्रिया को निर्धारित करने और प्रतिनिधि करने के लिए अनुरोधित हैश का उपयोग करता है।

मुझे आशा है कि आप सही रास्ते पर सेट करते हैं।

Comments

क्षमा करें लेकिन आपका उत्तर सत्य नहीं है। हाँ आप URL बदल सकते हैं।

— डेरेक 會 功夫

हाँ, आप HTML5 इतिहास एपीआई का उपयोग कर सकते हैं, लेकिन यह क्रॉस-ब्राउज़र नहीं है, हालांकि आप पॉली-फिल का उपयोग कर सकते हैं जो हैश यूआरएल पर वापस आ जाएगी।

— जेथ्रो लार्सन

Answer 6

jQuery के ब्राउज़र के URL को बदलने के लिए एक बढ़िया प्लगइन है, जिसे jQuery-pusher कहा जाता है ।

जावास्क्रिप्ट pushStateऔर jQuery को एक साथ इस्तेमाल किया जा सकता है, जैसे:

history.pushState(null, null, $(this).attr('href'));

उदाहरण:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

केवल जावास्क्रिप्ट का उपयोग करनाhistory.pushState() , जो कि रेफ़र को बदलता है, जो कि राज्य बदलने के बाद XMLHttpRequest ऑब्जेक्ट के लिए HTTP हेडर में उपयोग किया जाता है।

उदाहरण:

window.history.pushState("object", "Your New Title", "/new-url");

PushState () विधि:

pushState()तीन पैरामीटर लेता है: एक राज्य वस्तु, एक शीर्षक (जिसे वर्तमान में अनदेखा किया गया है), और (वैकल्पिक रूप से) एक URL। आइए इन तीन मापदंडों में से प्रत्येक को अधिक विस्तार से देखें:

1. राज्य वस्तु - राज्य वस्तु एक जावास्क्रिप्ट वस्तु है जो कि नए इतिहास प्रविष्टि द्वारा बनाई गई है pushState()। जब भी उपयोगकर्ता नए राज्य में नेविगेट करता है, तो एक पॉपस्टेट घटना को निकाल दिया जाता है, और घटना की राज्य संपत्ति में इतिहास प्रविष्टि की राज्य वस्तु की एक प्रति शामिल होती है।

   राज्य वस्तु कुछ भी हो सकती है जिसे क्रमबद्ध किया जा सकता है। क्योंकि फ़ायरफ़ॉक्स राज्य वस्तुओं को उपयोगकर्ता की डिस्क पर सहेजता है ताकि उपयोगकर्ता द्वारा उसके ब्राउज़र को पुनरारंभ करने के बाद उन्हें पुनर्स्थापित किया जा सके, हम राज्य वस्तु के क्रमबद्ध प्रतिनिधित्व पर 640k वर्णों की आकार सीमा लगाते हैं। यदि आप एक राज्य वस्तु पास करते हैं जिसका अनुक्रमित प्रतिनिधित्व इससे बड़ा है pushState(), तो विधि एक अपवाद फेंक देगी। यदि आपको इससे अधिक स्थान की आवश्यकता है, तो आपको सेशनस्टोरेज और / या लोकलस्टोरेज का उपयोग करने के लिए प्रोत्साहित किया जाता है।

2. शीर्षक - फ़ायरफ़ॉक्स वर्तमान में इस पैरामीटर की उपेक्षा करता है, हालांकि भविष्य में इसका उपयोग कर सकता है। खाली स्ट्रिंग को यहां पास करना भविष्य में विधि में बदलाव के खिलाफ सुरक्षित होना चाहिए। वैकल्पिक रूप से, आप जिस राज्य में जा रहे हैं, उसके लिए एक छोटा शीर्षक पारित कर सकते हैं।

3. URL - नए इतिहास प्रविष्टि का URL इस पैरामीटर द्वारा दिया गया है। ध्यान दें कि कॉल करने के बाद ब्राउज़र इस URL को लोड करने का प्रयास नहीं करेगा pushState(), लेकिन हो सकता है कि वह बाद में URL को लोड करने का प्रयास करे, उदाहरण के लिए उपयोगकर्ता द्वारा उसके ब्राउज़र को पुनरारंभ करने के बाद। नए URL को निरपेक्ष होने की आवश्यकता नहीं है; यदि यह सापेक्ष है, तो यह वर्तमान URL के सापेक्ष हल हो गया है। नया URL वर्तमान URL के समान मूल होना चाहिए; अन्यथा, pushState()एक अपवाद फेंक देंगे। यह पैरामीटर वैकल्पिक है; यदि यह निर्दिष्ट नहीं है, तो यह दस्तावेज़ के वर्तमान URL पर सेट है।

Answer 7

एक याहू YUI घटक (ब्राउज़र इतिहास प्रबंधक) है जो इसे संभाल सकता है: http://developer.yahoo.com/yui/hic/

Answer 8

फेसबुक की फोटो गैलरी URL में #hash का उपयोग करती है। यहाँ कुछ उदाहरण URL दिए गए हैं:

'अगला' क्लिक करने से पहले:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

'अगला' क्लिक करने के बाद:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

नए URL के तुरंत बाद हैश-बैंग (#!) नोट करें।

Answer 9

एक jquery प्लगइन है http://www.asual.com/jquery/address/

मुझे लगता है कि यह वही है जो आपको चाहिए।

Answer 10

मेरे लिए क्या काम कर रहा है - history.replaceState()फ़ंक्शन जो निम्नानुसार है -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

यह पृष्ठ को पुनः लोड नहीं करेगा, आप इसका उपयोग जावास्क्रिप्ट की घटना के साथ कर सकते हैं

Answer 11

मैं सोच रहा था कि क्या यह तब तक पॉसिबल रहेगा जब तक पेज में पैरेंट पाथ एक ही है, इसमें कुछ नया जोड़ा जाता है।

तो जैसे मान लें कि उपयोगकर्ता पृष्ठ पर है: http://domain.com/site/page.html तब ब्राउज़र मुझे करने दे सकता है location.append = new.html और पृष्ठ बन जाता है: http://domain.com/site/page.htmlnew.htmlऔर ब्राउज़र इसे परिवर्तित नहीं करता है।

या बस व्यक्ति को पैरामीटर बदलने की अनुमति दें, तो आइए location.get = me=1&page=1।

तो मूल पृष्ठ बन जाता है http://domain.com/site/page.html?me=1&page=1और यह ताज़ा नहीं होता है।

# के साथ समस्या यह है कि डेटा कैश नहीं है (कम से कम मुझे ऐसा नहीं लगता) जब हैश को बदल दिया जाता है। इसलिए यह हर बार की तरह एक नया पेज लोड किया जा रहा है, जबकि गैर- अजाक्स पृष्ठ में बैक- और फॉरवर्ड बटन डेटा को कैश करने में सक्षम हैं और डेटा को फिर से लोड करने में समय नहीं बिताते हैं।

मैंने जो देखा उससे याहू इतिहास की बात पहले ही एक बार में सभी डेटा को लोड कर देती है। यह कोई अजाक्स अनुरोध नहीं करता है। इसलिए जब divओवरटाइम अलग-अलग विधि को संभालने के लिए उपयोग किया जाता है, तो वह डेटा प्रत्येक इतिहास स्थिति के लिए संग्रहीत नहीं होता है।

Answer 12

मेरा कोड है:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

और कार्रवाई:

setLocation('http://example.com/your-url-here');

और उदाहरण है

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

बस इतना ही :)

Answer 13

एक और सरल उत्तर मैं प्रस्तुत करता हूं,

window.history.pushState(null, null, "/abc")

यह /abcब्राउज़र URL में डोमेन नाम के बाद जोड़ देगा । बस इस कोड को कॉपी करें और इसे ब्राउज़र कंसोल में पेस्ट करें और URL को " https://stackoverflow.com/abc " में बदलते देखें।

Answer 14

मुझे इसके साथ सफलता मिली है:

location.hash="myValue";

यह सिर्फ #myValueवर्तमान URL में जोड़ता है। यदि आपको पृष्ठ लोड पर एक घटना को ट्रिगर करने की आवश्यकता है, तो आप location.hashप्रासंगिक मूल्य की जांच के लिए उसी का उपयोग कर सकते हैं । उदाहरण के लिए #लौटाए गए मान से हटा देंlocation.hash

var articleId = window.location.hash.replace("#","");