यूआरएल

Question

में बैक बटन/हैश चेंज का पता लगाना मैंने अभी अपना नया होमपेज http://ritter.vg पर स्थापित किया है। मैं jQuery का उपयोग कर रहा हूँ, लेकिन बहुत कम से कम।
यह AJAX का उपयोग कर सभी पृष्ठों को लोड करता है - मैंने इसे URL में हैश का पता लगाकर बुकमार्किंग की अनुमति देने के लिए सेट अप किया है।

//general functions 
function getUrl(u) { 
     return u + '.html'; 
} 
function loadURL(u) { 
     $.get(getUrl(u), function(r){ 
       $('#main').html(r); 
      } 
    ); 
} 
//allows bookmarking 
var hash = new String(document.location).indexOf("#"); 
if(hash > 0) 
{ 
     page = new String(document.location).substring(hash + 1); 
     if(page.length > 1) 
     loadURL(page); 
     else 
     loadURL('news'); 
} 
else 
     loadURL('news'); 

लेकिन मुझे काम करने के लिए पीछे और आगे बटन नहीं मिल सकते हैं।

क्या सेट बटन अंतराल पाश का उपयोग किए बिना बैक बटन दबाया गया है (या हैश बदलते समय पता लगाया गया है) का पता लगाने का कोई तरीका है? जब मैंने उन लोगों को 2 और 1 सेकंड टाइमआउट के साथ करने की कोशिश की, तो उन्होंने मेरे सीपीयू को देखा।

Answer 1

इसके बजाय jQuery hashchange event प्लगइन का उपयोग करें। अपने पूर्ण AJAX नेविगेशन के बारे में, SEO friendly ajax रखने का प्रयास करें। अन्यथा आपके पृष्ठों ने जावास्क्रिप्ट सीमाओं वाले ब्राउज़र में कुछ भी नहीं दिखाया।

Answer 2

jQuery BBQ (Back Button & Query Library)

एक उच्च गुणवत्ता हैश आधारित ब्राउज़र इतिहास प्लगइन और बहुत ज्यादा up-to-date (Jan 26, 2010) as of this writing (jQuery 1.4.1)।

Answer 3

एक और महान कार्यान्वयन बलूपटन का jQuery History है जो मूल ऑनशैशचेंज ईवेंट का उपयोग करेगा यदि यह ब्राउज़र द्वारा समर्थित है, यदि नहीं, तो यह सुनिश्चित करने के लिए ब्राउज़र के लिए उचित रूप से एक आईफ्रेम या अंतराल का उपयोग करेगा, सभी अपेक्षित कार्यक्षमता सफलतापूर्वक अनुकरण की जाती है। यह कुछ राज्यों से जुड़ने के लिए एक अच्छा इंटरफेस भी प्रदान करता है।

jQuery Ajaxy पर ध्यान देने योग्य एक और प्रोजेक्ट जो कि मिश्रण में AJAX जोड़ने के लिए jQuery इतिहास के लिए काफी विस्तार है। जब आप हैश के साथ AJAX का उपयोग शुरू करते हैं तो यह quite complicated मिलता है!

Answer 4

एचटीएमएल 5 ने हैशचेंज का उपयोग करने के अलावा एक बेहतर समाधान शामिल किया है जो एचटीएमएल 5 स्टेट मैनेजमेंट एपीआई है - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - वे आपको हैंश का उपयोग किए बिना पृष्ठ के यूआरएल को बदलने की अनुमति देते हैं!

हालांकि एचटीएमएल 5 राज्य कार्यक्षमता केवल HTML5 ब्राउज़रों के लिए उपलब्ध है। तो शायद आप History.js जैसे कुछ का उपयोग करना चाहते हैं जो HTML4 ब्राउज़र्स (हैश के माध्यम से) के पीछे एक संगत अनुभव प्रदान करता है, लेकिन फिर भी डेटा और शीर्षक के साथ-साथ प्रतिस्थापन कार्यक्षमता का समर्थन करता है)।

आप यहाँ इसके बारे में अधिक पढ़ सकते हैं: https://github.com/browserstate/History.js

Answer 5

मैं निम्नलिखित है, आप तो इसका इस्तेमाल कुछ जहां में पेस्ट और locationHashChanged (QS) में अपने हैंडलर कोड सेट जहां टिप्पणी की करना चाहते हैं, और उसके बाद हर बार जब आप AJAX अनुरोध लोड करते हैं तो कॉल चेंज हैशवैल्यू (हैशक्वायर)। यह एक त्वरित-ठीक उत्तर नहीं है और कोई भी नहीं है, इसलिए आपको इसके बारे में सोचना होगा और समझदार हैशक्वायर तर्क (यानी ए = 1 & बी = 2) को बदलने के लिए हैशवैल्यू (हैशक्वायर) और फिर कहा गया तर्कों के प्रत्येक संयोजन को पूरा करने के लिए अपने locationHashChanged (QS) कॉलबैक में ...

// Add code below ... 
function locationHashChanged(qs) 
{ 
    var q = parseQs(qs); 
    // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !! 
    // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION 
    // THAT IS PASSED TO changeHashValue(hashQuery) 
} 

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ... 
function changeHashValue(hashQuery) 
{ 
    stopHashListener(); 
    hashValue  = hashQuery; 
    location.hash = hashQuery; 
    startHashListener(); 
} 

// AND DONT WORRY ABOUT ANYTHING BELOW ... 
function checkIfHashChanged() 
{ 
    var hashQuery = getHashQuery(); 
    if (hashQuery == hashValue) 
    return; 
    hashValue = hashQuery; 
    locationHashChanged(hashQuery); 
} 

function parseQs(qs) 
{ 
    var q = {}; 
    var pairs = qs.split('&'); 
    for (var idx in pairs) { 
    var arg = pairs[idx].split('='); 
    q[arg[0]] = arg[1]; 
    } 
    return q; 
} 

function startHashListener() 
{ 
    hashListener = setInterval(checkIfHashChanged, 1000); 
} 

function stopHashListener() 
{ 
    if (hashListener != null) 
    clearInterval(hashListener); 
    hashListener = null; 
} 

function getHashQuery() 
{ 
    return location.hash.replace(/^#/, ''); 
} 

var hashListener = null; 
var hashValue = '';//getHashQuery(); 
startHashListener(); 

Answer 6

सरल & हल्के PathJS lib का प्रयास करें।

सरल उदाहरण:

Path.map("#/page").to(function(){ 
    alert('page!'); 
}); 

Answer 7

यहाँ जवाब सब काफी पुराने हैं।

एचटीएमएल 5 दुनिया में, आपको onpopstate ईवेंट का उपयोग करना चाहिए।

window.onpopstate = function(event) 
{ 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}; 

या:

window.addEventListener('popstate', function(event) 
{ 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}); 

बाद टुकड़ा कई ईवेंट हैंडलर्स का अस्तित्व है, जबकि पूर्व जो मुश्किल से खोजने के कारण कीड़े हो सकता है किसी भी मौजूदा हैंडलर का स्थान ले लेगा अनुमति देता है।