2011-05-25 15 views
21

पेज को रीफ्रेश किए बिना मैं यूआरएल कैसे बदलूं?पेज को रीफ्रेश किए बिना मैं पेज यूआरएल कैसे बदल सकता हूं?

मैंने कोडइजिनर के साथ एक वेबसाइट बनाई है और मैं अपने पृष्ठों में से एक में AJAX और JQuery को कार्यान्वित करना चाहता हूं। यह समस्या है; जब मैं सामग्री लोड करता हूं, तो यूआरएल नहीं बदलता है। http://www.example.com/controller/function/param2

मैं कैसे जब मैं एक बटन पर क्लिक करें दूसरा एक के लिए सबसे पहले यूआरएल बदल सकते हैं:

मान लीजिए कि मैं यूआरएल http://www.example.com/controller/function/param
और एक और यूआरएल करते हैं?

उत्तर

27

एचटीएमएल 5 में आप यूआरएल बदल सकते हैं:

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

जांच http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

डॉक्स: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method


अद्यतन

जो ब्राउज़र sup का अवलोकन पोर्ट नए एचटीएमएल 5 इतिहास एपीआई:

http://caniuse.com/#search=pushState (caniuse.com बुकमार्क करने के लिए लायक है!)

वहाँ पहले से ही चौखटे है कि आप के लिए कड़ी मेहनत करने और यहां तक ​​कि शान से आम हैश टैग समाधान पर वापस आने कर रहे हैं:

History.js

History.js शान से सभी ब्राउज़रों में एचटीएमएल 5 इतिहास/राज्य एपीआई (pushState, replaceState, onPopState) का समर्थन करता है। डेटा, शीर्षक, प्रतिस्थापन के लिए निरंतर समर्थन सहित। JQuery का समर्थन करता है, म्यूटूल और प्रोटोटाइप। एचटीएमएल 5 ब्राउज़र के लिए इसका मतलब यह है कि आप सीधे यूआरएल को संशोधित कर सकते हैं, बिना अब हैश का उपयोग किए बिना। HTML4 ब्राउज़र के लिए यह पुरानी ऑनशैशचेंज कार्यक्षमता का उपयोग करने के लिए वापस वापस आ जाएगा।

Backbone.js

रीढ़ की आपूर्ति मुख्य मान बंधन और कस्टम घटनाओं, संग्रह साथ उपलब्ध कराने के मॉडलों द्वारा जावास्क्रिप्ट भारी आवेदन करने के लिए संरचना कथात्मक घटना से निपटने के साथ गणनीय काम करता है, विचारों का एक समृद्ध एपीआई के साथ , और रीस्टफुल JSON इंटरफ़ेस पर इसे आपके मौजूदा एप्लिकेशन से जोड़ता है। ... pushState समर्थन रीढ़ में एक विशुद्ध रूप से ऑप्ट-इन करते आधार पर ही मौजूद है। पुराने ब्राउज़र कि pushState का समर्थन नहीं करते हैश आधारित यूआरएल टुकड़े का उपयोग करने के लिए जारी रहेगा, और अगर एक हैश यूआरएल एक pushState सक्षम ब्राउज़र का दौरा किया है, यह पारदर्शी रूप से सच यूआरएल के लिए उन्नत किया जाएगा।

Mootools (via Plugin)

MooTools एक कॉम्पैक्ट, मॉड्यूलर, वस्तु उन्मुख जावास्क्रिप्ट उन्नत जावास्क्रिप्ट डेवलपर के लिए मध्यवर्ती के लिए बनाया गया ढांचा है। [...] पॉपस्टेट या हैशचेंज के माध्यम से इतिहास प्रबंधन। बिना किसी रीलोड के पृष्ठ के यूआरएल को बदलता है और पुराने ब्राउज़र पर हैशचेंज पर वापस आ जाता है।

dojo toolkit

डोजो, अपने विकास की प्रक्रिया के साथ आप समय और तराजू की बचत होती है अपने मंच के रूप में वेब मानकों का उपयोग कर। यह टूलकिट अनुभवी डेवलपर्स उच्च गुणवत्ता डेस्कटॉप और मोबाइल वेब अनुप्रयोगों के निर्माण के लिए बदल जाता है। [...] dojox.app HTML5 pushstate मानक के माध्यम से नेविगेशन इतिहास का प्रबंधन और ब्राउज़र के लिए यह प्रतिनिधि सक्षम इतिहास प्रबंधन।

... बस कुछ ही नाम है।


(!!) बारे में पता होना

एक महत्वपूर्ण पक्ष प्रभाव जब pushState (Backbone documentation से प्रशस्ति पत्र) का उपयोग:

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

+0

यह बहुत अच्छा है .. आपकी मदद के लिए धन्यवाद .. और इस धागे में टिप्पणी करने वाले सभी लोगों के लिए धन्यवाद ... :) –

+0

बस इतना है कि आप इतिहास.pushState के साथ अपने अनुभव के साथ जानते हैं, यह शानदार ढंग से अपमानित नहीं होता है, और काम नहीं करता है आईई 9 में, यह वास्तव में मेरी स्क्रिप्ट तोड़ दिया। एक फिक्स को लागू करना सुनिश्चित करें, या इसके बजाय document.location.hash का उपयोग करें। आप यह पता लगाने के लिए modernizer.js का उपयोग कर सकते हैं कि ब्राउज़र इसका समर्थन करता है या नहीं। – mcbeav

9

हैश (#) का उपयोग कर सकता है और जो कुछ भी आपको पसंद है उसे डाल दें।

यहाँ एक साइट मैं इस का उपयोग करके बनाया है - और उसके बाद मैं उपयुक्त कार्यों जावास्क्रिप्ट हैश पढ़ा है और फोन:

http://bannerhouse.com.au/#/popup=media&id=don

साइड नोट:

इस फ़्लैश वेबसाइटों या के लिए उपयोगी है फ्लैश सामग्री भी; आप फ्लैशवर्स का उपयोग एसएसएफ को हैश वैल्यू को पार्स करने के लिए कर सकते हैं और उस पर आधारित एक उचित सेक्शन/स्क्रीन लोड कर सकते हैं।

+0

साफ चाल। इससे पहले नहीं पता था। – Pwnna

+0

धन्यवाद, आप मेरी जिंदगी बचाओ .. !!! –

4

उपयोग हैश टैग, तो बटन के क्लिक ईवेंट हैंडलर में: location.hash = "param2" कौन सा, http://example.com/mypage/#whatever http://example.com/mypage/#param2

बेशक

के लिए बदल जाएगा तुम भी हैश के बाद अपने "फ़ोल्डर" डाल सकता है, हां, तो http://example.com/ का आधार यूआरएल के साथ आप तो जोड़ें: location.hash = "/MyPage/MySubPage/MyInfo"; जो यह http://example.com/#/MyPage/MySubPage/MyInfo

+0

जब मैंने कोशिश की, तो पहला यूआरएल 'http: // www.example.com/नियंत्रक/फ़ंक्शन/पैरामीटर' बन गया 'http://www.example.com/controller/function/param/#/controller/function/ param2' और यदि मैं यूआरएल पर एंटर दबाता हूं, तो मुझे पहले यूआरएल के साथ एक ही सामग्री मिलती है .. जब मैं यूआरएल दबाता हूं तो मैं सामग्री को दूसरी बार कैसे बदलूं ?? –

1

एक 012,374 में परिवर्तनकोई हैश टैग का उपयोग करते हुए, कोई नहीं किया गया।

एक विचार आगे रखा गया, लेकिन दृढ़ता से निराश, 204 HTTP प्रतिक्रिया का उपयोग कर रहा था।

डब्ल्यू 3 से:

कोई उत्तर 204

सर्वर अनुरोध प्राप्त हुआ है लेकिन कोई जानकारी नहीं है, वापस भेजने के लिए और ग्राहक एक ही दस्तावेज़ दृश्य में रहना चाहिए। यह मुख्य रूप से स्क्रिप्ट के लिए इनपुट को दस्तावेज़ को एक ही समय में बदलने के बिना अनुमति देने के लिए है।

संबंधित मुद्दे