pushState() और popstate(): 'ब्राउज़रों इतिहास

Question

मैं एक छोटे से परियोजना जिसमें मैं एक अजाक्स शैली वेबसाइट बनाने के लिए चाहते हैं पर काम कर रहा हूँ से छेड़छाड़। सामग्री jQuery के load() के साथ लोड की गई है। जैसा कि आप में से कुछ जानते हैं, इसका निचला पक्ष यह है कि यूआरएल प्रदर्शित सामग्री के अनुसार बदलता नहीं है। इस काम को करने के लिए आप pushState() का उपयोग कर सकते हैं। क्योंकि इस पार ब्राउज़र समर्थित नहीं है, मैं history.js में प्लग का इस्तेमाल किया।

यह काफी अच्छी तरह से काम कर रहा है, लेकिन समस्या यह है कि मेरी पीठ और आगे के बटन काम नहीं कर रहे हैं जैसा कि उन्हें करना चाहिए और मुझे नहीं पता कि मैं क्या गलत कर रहा हूं। यूआरएल सही ढंग से बदल रहा है और सामग्री भी अच्छी है, लेकिन शीर्षक बिल्कुल बदल नहीं रहा है। शीर्षक के साथ मेरा मतलब ब्राउज़र विंडो के विंडो (या टैब) के शीर्षक के रूप में दिखाया गया है। अर्थात। पेज कि भरी हुई है या लिंक है कि उस पेज को संदर्भित करता है के शीर्षक विशेषता का <title> (वे एक ही हैं)। मुझे लगता है कि यह सच है कि मैं पेज जिसका शीर्षक मैं जरूरत का केवल एक अनुभाग फोन से कोई लेना देना नहीं है (अर्थात load() को #content जोड़कर)। मैं अभी भी उस पृष्ठ का शीर्षक चाहता हूं। मेरे पास अब तक का एक परीक्षण केस है। (उपलब्ध नहीं है किसी भी अधिक के बाद से 28 दिसम्बर 2013) jQuery फ़ाइल:

$(document).ready(function() { 
    var firstLink = $("ul > li:first-child > a"); 
    var menuLink = $("ul > li > a"); 
    var firstLoadedHtml = firstLink.attr("href") + " #content"; 

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast"); 
    firstLink.addClass("active"); 

    menuLink.click(function(e) { 
     history.pushState(null, null, this.href); 

     e.preventDefault(); 
     e.stopImmediatePropagation(); 

     var CurLink = $(this); 
     var newLoadedHtml = CurLink.attr("href") + " #content"; 
     var oldSection = $(".contentPage"); 

     $("#sectionContainer").hide().load(newLoadedHtml).fadeIn("fast"); 
     menuLink.removeClass("active"); 
     CurLink.addClass("active"); 
    }); 

    $(window).bind('popstate', function() { 
      var returnLocation = history.location || document.location; 

      $('#sectionContainer').load(returnLocation + "#content"); 
    }); 
}); 

मैं यह भी कहा कि जब बुनियादी पृष्ठ (यानी/sectionLoaderTest /) के लिए वापस जा यह थोड़ी देर के लिए और केवल कुछ समय के बाद खाली हो जाता है पहले पृष्ठ की सामग्री लोड हो गई है। क्या इसे अनुकूलित करने का कोई तरीका है?

साथ ही, मैं jQuery का उपयोग कर रहा है कि लिंक क्लिक किया गया है करने के लिए एक सक्रिय श्रेणी जोड़ने के लिए। मैं कैसे सुनिश्चित कर सकता हूं कि यह इतिहास के अनुसार बदलता है? ताकि जब उपयोगकर्ता वापस नेविगेट करता है तो सही लिंक हाइलाइट किया जाता है?

तो तीन प्रश्न हैं:

1. जब आगे बढ़ते हुए और पिछड़े
2. mainpage का लोड समय
3. सक्रिय स्तरीय फिक्स का अनुकूलन जब आगे बढ़ते हुए और पिछड़े
कार्य शीर्षक प्राप्त करें

सभी सहायता आपका स्वागत है!

नोट 1: मैं history.js और अपनी खुद की स्क्रिप्ट पर निर्माण करना चाहता हूं और इस तरह < HTML5 ब्राउज़र के लिए समर्थन रखना चाहता हूं। मैं इसे पसंद करूंगा क्योंकि 1. मुझे पता है कि इसे काम करना है, कुछ ऐसा गलत है जो गलत हो रहा है। 2. यह समय बचाएगा अगर मैं किसी के समाधान को देख सकूं और इसे एक नई स्क्रिप्ट को समझने के बजाय पहले से लिखी गई स्क्रिप्ट में लागू कर सकूं।

नोट 2: बक्षीस केवल उन सभी को दिया जाएगा जो मेरे सभी सवालों का जवाब दे सकते हैं (3)!

Answer 1

उत्तर 1 - शीर्षक जब आगे जहां तक ​​मैं समझ गया कि आप लिंक से दस्तावेज़ शीर्षक एचटीएमएल एक div में भरी हुई है बदलना चाहते जा रहा है और पिछड़े

काम कर रहा है। जब आप jQuery .load के माध्यम से एक div में फ़ाइल लोड कर रहे हैं तो आप इसमें AJAX अनुरोध के बाद पूर्ण प्रतिक्रिया टेक्स्ट डाल रहे हैं। सब सामान जो title या meta टैग की तरह एक div में नहीं होना चाहिए साथ तो। हालांकि वर्तमान दस्तावेज़ का शीर्षक (http://bramvanroy.be/sectionLoaderTest/index.html) title में परिभाषित किया गया है जो head टैग के अंदर है और title टैग में div के अंदर नहीं है, इसलिए दस्तावेज़ शीर्षक नहीं बदलता है।

तो मैं इसे कैसे ठीक कर सकता हूं?

अच्छा सवाल है, क्योंकि एक div तत्व के अंदर title तत्व अमान्य है, अधिकांश ब्राउज़र निकाल देंगे यह तो आप सिर्फ इस का उपयोग नहीं कर सकते हैं:

document.title = $("#sectionContainer title").text(); 

क्योंकि title तत्व मौजूद नहीं हो सकता है।

तो हमें जो चाहिए वह jQuery .load फ़ंक्शन से सीधी प्रतिक्रिया है। मैं समारोह के लिए कॉलबैक तर्क जोड़कर प्राप्त कर सकते हैं:

$("#sectionContainer") 
    .hide() 
    .load(newLoadedHtml, function(responseText) { 
     document.title = $(responseText).filter("title").text(); 
    }) 
    .fadeIn("fast"); 

कारण है कि मैं .filter और नहीं .find फ़ंक्शन का उपयोग करें जो आप नहीं समझ सकते है। ऐसा इसलिए है क्योंकि jQuery एक प्रकार का पार्सिंग html, head और body HTML से बाहर टैग है लेकिन वहां बाल तत्वों को हटा नहीं रहा है।

उत्तर 2 - का अनुकूलन mainpage

एक दस्तावेज़ ऊपर से नीचे करने के लिए से लोड हो रहा है के लोड समय।

तो पहले सभी सीएसएस, जावास्क्रिप्ट आदि लोड किया जाना चाहिए और फिर मुख्य दस्तावेज़। क्योंकि jQuery हमेशा इसे निष्पादित करने से पहले दस्तावेज़ के लिए प्रतीक्षा कर रहा है क्योंकि शरीर के अंत से पहले अपने सभी script तत्वों को रखना बहुत बुरा विचार नहीं होगा, ताकि आपका HTML पहले लोड हो सके।

बीटीडब्ल्यू मुझे पहली बार इस समस्या का सामना करना पड़ा था कि सब कुछ कैश किया गया था और दस्तावेज़ बहुत तेजी से लोड हो रहा था।

उत्तर 3 - सक्रिय स्तरीय जब आगे जाने को ठीक करें और पिछड़े

मैं पाश a तत्वों की href विशेषताओं गर्त कहते हैं और History.getState() से डेटा के साथ तुलना करेंगे। आसान होना चाहिए।

आप था अपने कोड में कुछ गलतियों - अपने नियत कोड:

आप सभी URLs तक हैश #content संलग्न .. यह मतलब नहीं है और इसे फिर से jQuery द्वारा निकाल दिया जाएगा: https://github.com/jquery/jquery/blob/master/src/ajax.js#L617 (आता है लाइनों से: 158, 190, 337, 617 - rhash लाइन 6)

$(document).ready(function() { 
    var firstLink = $("ul > li:first-child > a"); 
    var menuLink = $("ul > li > a"); 
    var firstLoadedHtml = firstLink.attr("href"); 

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast"); 
    firstLink.addClass("active"); 

    menuLink.click(function(e) { 

     e.preventDefault(); 
     e.stopImmediatePropagation(); 

     var newLoadedHtml = $(this).attr("href"); 

     History.pushState(null, newLoadedHtml, newLoadedHtml); 

     $("#sectionContainer") 
      .hide() 
      .load(newLoadedHtml, function(responseText) { 
       document.title = $(responseText).filter("title").text(); 
      }) 
      .fadeIn("fast"); 
    }); 

    History.Adapter.bind(window, "statechange", function() { 
     menuLink.removeClass("active"); 
     $("a[href='" + History.getState().title + "']").addClass("active"); 
     $('#sectionContainer').load(document.location.href, function(responseText) { 
      document.title = $(responseText).filter("title").text(); 
     }); 
    }); 
}); 

Answer 2

तुम भी davis.js या jQuery पुशर ०१२३५१६४१०६ की तरह उपलब्ध मार्ग प्लगइन्स की कोशिश कर सकते पर हैhttps://github.com/salvan13/jquery-pusher