2008-11-06 10 views
38

पृष्ठभूमि बाहर /: मैं आप किसी विशेष सामग्री का विस्तार करने देता है जो एक HTML पृष्ठ है। चूंकि पृष्ठ के केवल छोटे हिस्सों को इस तरह के विस्तार के लिए लोड करने की आवश्यकता है, यह जावास्क्रिप्ट के माध्यम से किया जाता है, न कि एक नए यूआरएल/एचटीएमएल पेज पर निर्देशित करके। हालांकि, एक बोनस के रूप में उपयोगकर्ता है, यानी इस तरह के विस्तार वर्गों के लिए permalink भेजने किसी और की तरहजावास्क्रिप्ट के साथ URL में टुकड़ा निकालें w पृष्ठ पुनः लोड के कारण

http://example.com/#foobar

एक URL और "foobar" श्रेणी है कि अन्य उपयोगकर्ता के लिए तुरंत खोला जा करने में सक्षम है। यह parent.location.hash = 'foobar' का उपयोग करके काम करता है, ताकि भाग ठीक हो।

अब सवाल: उपयोगकर्ता पेज पर इस तरह के एक वर्ग को बंद कर देता है, मैं किसी URL खंड फिर से रिक्त होता है, अर्थात स्थायी लिंक प्रदर्शन को अपडेट करने http://example.com/ में http://example.com/#foobar चालू करना चाहते हैं। हालांकि, parent.location.hash = '' का उपयोग करके ऐसा करने से पूरे पृष्ठ का पुन: लोड होता है (उदाहरण के लिए फ़ायरफ़ॉक्स 3 में), जिसे मैं टालना चाहता हूं। window.location.href = '/#' का उपयोग पृष्ठ रीलोड को ट्रिगर नहीं करेगा, लेकिन URL में कुछ हद तक अनूठा दिखने वाला "#" चिह्न छोड़ देता है। तो जावास्क्रिप्ट में लोकप्रिय ब्राउज़रों में कोई तरीका है- एक पृष्ठ एंटर को रीफ्रेश किए बिना "#" चिह्न सहित यूआरएल एंकर को हटा दें?

+0

यह [संबंधित प्रश्न] (http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for) एक दिलचस्प पढ़ा है । –

उत्तर

40

जैसा कि अन्य ने उल्लेख किया है, replaceState एचटीएमएल 5 में यूआरएल खंड को हटाने के लिए इस्तेमाल किया जा सकता है।

// remove fragment as much as it can go without adding an entry in browser history: 
window.location.replace("#"); 

// slice off the remaining '#' in HTML5:  
if (typeof window.history.replaceState == 'function') { 
    history.replaceState({}, '', window.location.href.slice(0, -1)); 
} 
+0

ठोस। मैं # को हटाने की क्षमता की पहचान की सराहना करता हूं, लेकिन पीछे की तरफ संगत। –

7

कहने के लिए क्षमा करें, लेकिन इस सवाल का जवाब है, तो खाली location.hash कार्य को पूरा नहीं करता है नहीं है -!)

+0

क्या यह वाकई सच हो सकता है? –

+0

इस उत्तर को हटाने की जरूरत है। यह सादा गलत है और कम से कम एक सही उत्तर से अधिक वोट है। – atomless

14

जब से तुम हैश मान पर कार्रवाई को नियंत्रित करने कर रहे हैं, यही कारण है कि सिर्फ एक टोकन का मतलब है कि का उपयोग नहीं "कुछ नहीं", जैसे "#_" या "#default"।

+1

मुझे लगता है कि यह विचार करने योग्य है। –

+1

हां, आप एक खाली एंकर का भी उपयोग कर सकते हैं, इसलिए यूआरएल http://example.com/# के रूप में समाप्त होता है। यह लगभग सही है, लेकिन मुझे लगता है कि यह कुछ आगंतुकों को थोड़ा भ्रमित लग रहा है। आदर्श रूप से वहां हैश चरित्र भी नहीं दिख रहा है ... –

+0

जाहिर है। आपकी स्क्रिप्ट को हैश में कुछ भी नहीं करना चाहिए। –

-1
$(document).ready(function() { 
     $(".lnk").click(function(e) { 
      e.preventDefault(); 
      $(this).attr("href", "stripped_url_via_desired_regex"); 
     }); 
    }); 
+1

धन्यवाद फ्लोरिन, क्या आप कृपया यह बता सकते हैं कि यह कोड क्या करता है? –

0

तो

parent.location.hash = '' पहले

तो

window.location.href=window.location.href.slice(0, -1); 
+12

किसी भी तरह से बदल रहे स्थान.href पृष्ठ को फिर से लोड करेगा। – Evgeny

+0

यह '#' सहित पूरे खंड से छुटकारा पाने के लिए काम करता है लेकिन Evgeny सही है, यह पृष्ठ – JCarter

1

वहाँ भी बजाय हैश, का उपयोग करने का एक और विकल्प है कि आप इस्तेमाल कर सकते हैं का उपयोग javascript: void(0); उदाहरण: <a href="javascript:void(0);" class="open_div">Open Div</a>

मुझे लगता है कि यह भी जब आप लिंक उस तरह की जरूरत पर निर्भर करता है, ताकि आप बेहतर निम्न लिंक की जाँच करें:

इसका उपयोग कैसे करें: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ या यहाँ क्या बेहतर है पर बहस की जाँच करें: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

-2

दूसरों के रूप में कहा है, आप यह नहीं कर सकते हैं। इसके अलावा ... गंभीरता से, jQuery Ajaxy लेखक के रूप में - मैंने कई वर्षों से पूर्ण AJAX वेबसाइटों को तैनात किया है - और मैं गारंटी दे सकता हूं कि कोई अंतिम उपयोगकर्ता कभी शिकायत नहीं करता है या शायद यह भी ध्यान दिया गया है कि इस हैश की बात चल रही है, उपयोगकर्ता नहीं है जब तक यह काम करता है तब तक देखभाल करें और वे जो प्राप्त कर रहे हैं उन्हें प्राप्त करें। इस एचटीएमएल 5 राज्य कार्यक्षमता https://github.com/browserstate/History.js की जाँच का समर्थन करता है कि https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history एक एचटीएमएल 5 के लिए और HTML4 संगत परियोजना:

एक उचित समाधान हालांकि HTML5 pushstate/replaceState/popstate ;-) कौन सा अब और fragement-पहचानकर्ता की जरूरत नहीं है -)

+0

पृष्ठ को फिर से लोड करता है "उपयोगकर्ता की परवाह करता है" से ऐसा करने के बेहतर कारण हैं। उदाहरण के लिए: https://wistia.com/blog/fresh-url –

4

ASCIIcasts 246: AJAX History State और on the GitHub blog में वर्णित अनुसार, आप चमकदार नए HTML5 window.history.pushState और replaceState विधियों का उपयोग कर सकते हैं। यह आपको पूरे पथ को बदलता है (उसी मूल होस्ट के भीतर) न केवल टुकड़ा।इस सुविधा को आजमाने के लिए, हाल ही के ब्राउज़र के साथ browse around a GitHub repository

0

सिर खंड पर इस कोड डालें:

यहाँ एक उदाहरण है।

<script type="text/javascript"> 
    var uri = window.location.toString(); 
    if (uri.indexOf("?") > 0) { 
     var clean_uri = uri.substring(0, uri.indexOf("?")); 
     window.history.replaceState({}, document.title, clean_uri); 
    } 
</script> 
संबंधित मुद्दे