ब्राउज़र "बैक" बटन बनाम jQuery- एनिमेटेड पेज

Question

मुझे एक चुनौतीपूर्ण समस्या है जो मैं कुछ समय से जूझ रहा हूं।

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

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

//Animate the content up from below the browser window 

$('#maincontent').animate({top: "15%"}, 2000); 

और

//Animate the content up to hide above the browser window 

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 
    $('#maincontent').animate({ 
     top: '-300%' 
    }, 500, 
    function() { 
     window.location = href; 
    }); 
}); 

प्रश्न:: जब ब्राउज़र वापस बटन क्लिक किया जाता है कि कैसे मैं अपनी आरंभिक अवस्था में पेज का प्रदर्शन कर सकता हूँ पूरी बात कोड के इन दो बिट्स के साथ हासिल की है?

मैंने कुछ समय के लिए StackOverflow ब्राउज़ किया। लोगों ने इस मुद्दे के बारे में बहुत कुछ पूछा लेकिन कोई ऐसा समाधान नहीं पहुंचा जो वास्तव में काम करता था। सुझावों में पृष्ठ को कैश होने से अवरुद्ध करना शामिल है - (काम नहीं करता है, और यहां तक ​​कि अगर यह काम करता है, तो भी बहुत उत्पादक नहीं होगा क्योंकि कुछ पृष्ठों को कैश करने की आवश्यकता होती है) - पृष्ठ को फिर से लोड करना (कुछ अनोखे व्यवहारों की ओर जाता है और अंत में ' टी काम, या तो) - कुकीज़ का उपयोग (कोड का कोई विशिष्ट उदाहरण कहीं भी नहीं दिया जाता है) या php का उपयोग (कोड का कोई विशिष्ट उदाहरण कहीं भी नहीं दिया जाता है)। मैंने इस साइट पर कई प्रश्न पूछे और कई सुझाव प्राप्त किए लेकिन उनमें से कोई भी मेरी स्थिति में काम नहीं कर पाया। तो कुछ नींद की रात के बाद मैं पूछना चाहता हूं कि कोई वास्तव में इसके साथ मदद कर सकता है या नहीं।

अगर किसी ने सफलतापूर्वक पहले उस प्रोबेलम का सामना किया था, तो मैं आभारी रहूंगा यदि आप अपने विशेषज्ञ ज्ञान को साझा कर सकते हैं और एक व्यावहारिक समाधान सुझा सकते हैं!

नया संपादन: मुझे लगता है कि मुझे समाधान मिल सकता है, लेकिन मुझे jQuery/जावास्क्रिप्ट सिंटैक्स के साथ किसी की मदद चाहिए। मैं इसे और अधिक क्रिया जोड़ने के लिए कोड को संशोधित करने का प्रयास करना चाहता हूं, लेकिन मुझे यकीन नहीं है कि इसे कैसे लिखना है, ताकि पृष्ठ को नए पृष्ठ पर स्थानांतरित करने से पहले एक पल फिर से लोड हो जाए तो दूसरे की बजाय ऊपर दिखाया गया स्निपेट, मैं इस तरह कुछ लिखना चाहता हूं:

//Animate the content up to hide above the browser window 

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 
    $('#maincontent').animate({ 
     top: '-300%' 
    }, 500, 
    function() { 
    // a code that reloads the same page, something like 
    //window.location = window.location; followed by 
     window.location = href; 
    }); 
}); 

- लेकिन मुझे नहीं पता कि इसे सही तरीके से कैसे लिखना है।

वैकल्पिक रूप से, शायद पृष्ठ के सीएसएस मूल्यों को सीएसएस फ़ाइल से डिफ़ॉल्ट लोगों को रीसेट करना और जावास्क्रिप्ट को फिर से ट्रिगर करना संभव है?

कोई व्यक्ति उचित कोड की सलाह दे सकता है?

Answer 1

अस्वीकरण: निम्नलिखित वास्तव में एक मजबूत समाधान नहीं है, लेकिन मैं इसे मनोरंजक पाया और सोचा कि मैं साझा करने के लिए चाहिए।

मुझे अतीत में एक समान आवश्यकता थी, और आश्चर्यजनक रूप से पर्याप्त, जिस समाधान के साथ मैं समाप्त हुआ था, उसे a bug in jQuery 1.3 का लाभ उठाने के लिए jQuery में डाउनग्रेड करना था।

मैं केवल फ़ायरफ़ॉक्स में से एक संस्करण पर इस परीक्षण किया है, तो YMMV, लेकिन निम्न प्रयास करें:

• Using jQuery 1.3 - जब आप लिंक पर क्लिक करें फिर वापस बटन
• Using jQuery 1.4 के साथ वापस आ इस एनीमेशन दोहराता - यह

यह मेरे उपयोग-मामले के लिए पर्याप्त था क्योंकि मैं सीमित दर्शकों को लक्षित कर रहा था और केवल jQuery का न्यूनतम उपयोग किया था। उस ने कहा, मैं एक बेहतर समाधान खोजने की उम्मीद में उत्सुकता से इस धागे को देख रहा हूं।

अद्यतन

ऊपर कहा गया है jQuery बग के निशान के बाद, ऐसा लगता है जैसे आप bfcache को अक्षम करके एक ही प्रभाव प्राप्त कर सकते हैं लग रहा है।

करने का सबसे आसान तरीका add an onunload attribute to body होगा। (लिंक में अधिक जानकारी)।

<body onunload=''> 

यहां एक उदाहरण है, जो jquery 1.6 का उपयोग करता है। फिर, वाईएमएमवी का पूरी तरह से परीक्षण नहीं किया गया।

• Using jQuery 1.6, with bfcache disabled

Answer 2

यह thread देखें। वह नीचे दिए गए अनुसार एक हैक सुझाता है (वहां से कॉपी किया गया):

जब उपयोगकर्ता बैक बटन हिट करता है तो ऑनलोड ईवेंट निकाल दिया जाना चाहिए। जावास्क्रिप्ट के माध्यम से बनाए गए तत्व उनके मान बनाए रखेंगे। मैं एक INPUT TYPE = "छुपा" या टेक्सटेरा सेट के भीतर गतिशील रूप से बनाए गए तत्व में उपयोग किए गए डेटा का बैकअप रखने का सुझाव देता हूं: गतिशील तत्वों को उसी तरह से पुनर्निर्माण करने के लिए टेक्स्टबॉक्स के मान का उपयोग करके कोई भी अधिभार नहीं।

आप पेज के पुनर्निर्माण के बारे में परवाह नहीं है और वास्तव में यह फिर से लोड करना चाहते हैं, तो आप कर सकता है: कोड:

<input type="hidden" id="refreshed" value="no"> 
<script type="text/javascript"> 
onload=function(){ 
var e=document.getElementById("refreshed"); 
if(e.value=="no")e.value="yes"; 
else{e.value="no";location.reload();} 
} 
</script> 

आप के रूप में "हाँ" छिपा मूल्य बना सकते हैं #menu क्लिक पर ।

HTH

Answer 3

ऊपर जवाब समस्या पर स्पर्श, लेकिन सवाल हल करने के लिए hacky तरीके प्रदान करते हैं। ऐसा करने का यह सही तरीका प्रतीत होता है।

$(window).bind('pageshow',function(){ 
    alert("This page will run even if the back button was pressed!"); 
}); 

pageshow पर अधिक पढ़ने के लिए/pagehide घटनाओं यहाँ देखें: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

आप इस प्रकार का कदम आगे ले जा सकते हैं कर सकते हैं:

$(window).bind('pageshow',function(e){ 
     if (e.persisted) { 
      alert("pageshow event handler called. The page was just restored from the Page Cache."); 
     } else { 
      alert("pageshow event handler called for the initial load. This is the same as the load event."); 
     } 
}