2012-06-04 6 views
22

मेरे पास jQuery मोबाइल का उपयोग कर एक फोनगैप ऐप है। एक निश्चित पृष्ठ पर, मैं उपयोगकर्ता को उनके द्वारा देखे गए अंतिम पृष्ठ पर वापस जाने नहीं दे सकता।Jquery मोबाइल के नेविगेशन इतिहास को कैसे साफ़ या परिवर्तित करें?

पृष्ठों के आदेश इस तरह है:

(1)index -> (2)listing items -> (3)form submited -> (4)sucess page 

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

मुझे लगता है कि jQuery मोबाइल स्टोर किसी प्रकार की सरणी में नेविगेशन इतिहास की कल्पना करता है, और मुझे उम्मीद है कि कोई इसे ढूंढने में मदद कर सकता है। अग्रिम में धन्यवाद!

संपादित करें: मैं multi-page template, जो एक एकल html पृष्ठ, जिसमें कुछ divs jQuery मोबाइल द्वारा प्रबंधित पृष्ठों के रूप में काम करता है का उपयोग कर रहा हूँ।

उत्तर

29

असल में आपके पास दो इतिहास "बर्तन" हैं जिनके साथ आपको छेड़छाड़ की आवश्यकता है। ब्राउज़र और जेक्यूएम।

JQM urlHistory
आप JQMs urlHistory बहुत आसानी से बदल सकते हैं। JQM कोड से: तो ऊपर कार्यों के सभी

urlHistory = { 
    // Array of pages that are visited during a single page load. 
    // Each has a url and optional transition, title, and pageUrl 
    // (which represents the file path, in cases where URL is obscured, such as dialogs) 
    stack: [], 
    // maintain an index number for the active page in the stack 
    activeIndex: 0, 
    // get active 
    getActive: function() { 
     return urlHistory.stack[urlHistory.activeIndex]; 
    }, 
    getPrev: function() { 
     return urlHistory.stack[urlHistory.activeIndex - 1]; 
    }, 
    getNext: function() { 
     return urlHistory.stack[urlHistory.activeIndex + 1]; 
    }, 
    // addNew is used whenever a new page is added 
    addNew: function (url, transition, title, pageUrl, role) { 
     // if there's forward history, wipe it 
     if (urlHistory.getNext()) { 
      urlHistory.clearForward(); 
     } 
     urlHistory.stack.push({ 
      url: url, 
      transition: transition, 
      title: title, 
      pageUrl: pageUrl, 
      role: role 
     }); 
     urlHistory.activeIndex = urlHistory.stack.length - 1; 
    }, 
    //wipe urls ahead of active index 
    clearForward: function() { 
     urlHistory.stack = urlHistory.stack.slice(0, urlHistory.activeIndex + 1); 
    } 
}; 

उपलब्ध हैं और उदाहरण के लिए इस तरह कहा जा सकता है:

$.mobile.urlHistory.clearForward(); 

अपने इतिहास पर नजर रखने, इस कहीं रख दिया और (एक बार pageChange के लिए सुनने के लिए बदलाव किया जाता है) क्या urlHistory अंदर है देखने के लिए:

$(document).on('pagechange', 'div:jqmData(role="page")', function(){ 
    console.log($.mobile.urlHistory.stack); 
}); 

वहां से आप को देखने के लिए क्या इतिहास में हो सकता है और यह साफ के रूप में आप की आवश्यकता चाहिए शुरू कर सकते हैं।

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

पर ब्राउज़र के साथ सिंक-इंग:
मेरे नेविगेशन परत में मैं केवल urlHistory से डबल प्रविष्टियां निकालने रहा हूँ, इसलिए हमेशा यह पेज है जब आप ब्राउज़र बैक बटन पर क्लिक करते हैं, तो (और दो नहीं) जाने के लिए। आपके मामले में, आप अनुमान लगाएंगे कि ब्राउज़र इतिहास में 4 प्रविष्टियां हैं, लेकिन यदि आप JQM urlHistory से 2 प्रविष्टियों को हटाते हैं, तो आपके पास होगा जब बैक बटन क्लिक किया गया है तो दो पृष्ठ "नहीं मिला"।तो अपने ब्राउज़र इतिहास इस तरह दिखता है:

www.google.com 
www.somePage.com 
www.YOUR_APP.com = page1 
    page2 
    page3 
    page4 

और अपने निकालें पृष्ठ 2 और पृष्ठ 3, बैक बटन पर क्लिक परिणाम चाहिए में:

1st back-click = page4 > page1 
2nd back-click = page1 > www.somePage.com [because you removed page3] 
3rd back-click = www.somePage.com > www.google.com [because you removed page2] 

एक सैद्धांतिक वैकल्पिक हल होगा:

  1. एक काउंटर रखें कि आप एक पृष्ठ में कितने "गहरे" जाते हैं
  2. JQM urlHistory से पृष्ठों को हटाएं और "कूदें" मान = काउंटर-हटाए गए पृष्ठ
  3. अगले ब्राउज़र पर वापस क्लिक करें, x window.history (पीछे) कूदें और केवल एक JQM संक्रमण पास करें। आप तनाव कम देगी, लेकिन URL page4> पृष्ठ 3> पृष्ठ 2> पृष्ठ 1 एक ही चरण में हैं और आप केवल JQM page4 से एक भी संक्रमण करने के लिए
  4. जांच क्या urlHistory में है पृष्ठ 1 और अपने "ट्रिपल वापस"
के बाद साफ करने के लिए अनुमति देते हैं

सावधान रहें एक इष्टतम समाधान नहीं है और आपको बहुत सी चीजों पर विचार करना होगा (उपयोगकर्ता वापस जाने से पहले कहीं और क्लिक करता है)। मैंने इस तरह कुछ ऐसा करने के लिए हमेशा एक जटिल सेटअप में काम करने की कोशिश की और आखिरकार इसका इस्तेमाल बंद कर दिया, क्योंकि यह कभी भी काम नहीं करता था। लेकिन एक सरल सेटअप के लिए यह बहुत अच्छी तरह से काम कर सकता है।

+11

क्या आपको पुराने और नए देवताओं द्वारा आशीर्वाद दिया जा सकता है! –

+0

जेएसएफ में, उदाहरण के लिए, मैंने jQuery मोबाइल के 'डेटा-रिले = "बैक" बटन के क्लिक को ओवरराइड करने के लिए इस दृष्टिकोण का उपयोग किया है: 'window.history.go (- # {प्रबंधितBean.count});', जो होगा 'window.history.go (-3) में बदलें; 'यदि आप पृष्ठ 4 में हैं, उदाहरण के लिए। – falsarella

+0

मुझे jqm दस्तावेज़ों में $ .mobile.urlHistory नहीं मिल रहा है ... http://api.jquerymobile.com/?s=urlHistory – dsdsdsdsd

3

jQuery मोबाइल पृष्ठ पर पृष्ठ नेविगेशन के लिए ब्राउज़र इतिहास का उपयोग करता है, इसलिए उपयोगकर्ता को वापस जाने से रोकना ब्राउज़र में वास्तव में संभव नहीं है। हालांकि, चूंकि आपके पास फोनगैप ऐप है, इसलिए आप सीधे बैक बटन को संभाल सकते हैं। इस प्रश्न में आपकी मदद करनी चाहिए: Override Android Backbutton behavior only works on the first page with PhoneGap

+0

मैं केवल एक HTML फ़ाइल का उपयोग कर बहु ​​पृष्ठ टेम्पलेट का उपयोग कर रहा हूं। मुझे नहीं लगता कि यह ब्राउज़र इतिहास का उपयोग करता है, लेकिन एक AJAX- जैसे स्वयं प्रबंधित ब्राउज़र इतिहास। –

+0

हां, यह इतिहास.pushState का उपयोग कर रहा है/ब्राउज़र पर हैश बदल रहा है जो pushState का समर्थन नहीं करता है। यह अभी भी ब्राउज़र इतिहास में प्रविष्टियां बनाता है जिसे आप हटा नहीं सकते (जावास्क्रिप्ट से संभव नहीं) - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history देखें। – OlliM

+0

जेक्यूएम से इस कार्यक्षमता को बंद करना संभव है, लेकिन इसका मतलब यह होगा कि आप इसके साथ कार्यक्षमता का एक बड़ा हिस्सा खो देते हैं, जिसे आपको स्वयं को लागू करना होगा। स्विच AJAX सक्षम है: http: // jquerymobile।कॉम/टेस्ट/डॉक्स/एपीआई/globalconfig.html – OlliM

1

यह एक साधारण उत्तर है और इसलिए इसे लिया जाना चाहिए। आप बस के साथ

delete $.mobile.urlHistory.stack[index_of_your_choosing]; 

urlHistory.stack से बाहर आइटम को हटा सकते हैं क्या आप वाकई सही पृष्ठ आप कुछ इस तरह कर सकते हैं हटा दिया जाता है बनाना चाहते हैं।

var stack_count = $.mobile.urlHistory.stack.length; 

for(x=0; x<stack_count; x++){ 

    $.mobile.urlHistory.stack[x]; 

    if(typeof $.mobile.urlHistory.stack[x] !== 'undefined'){ 

    if($.mobile.urlHistory.stack[x].url != 'http://url-to-exclude.com/'){ 

     delete $.mobile.urlHistory.stack[x]; 

    }} 
} 
+0

डाउनवोट की व्याख्या करने के लिए देखभाल? – jacobross85

13

बस एक एफवाईआई; जेक्यूएम 1.4 आरसी 1 कोई urlHistory नहीं है, लेकिन आप नेविगेट ऑब्जेक्ट से पढ़ सकते हैं।

उदाहरण:

$.mobile.navigate.history.stack[0]; 
// Object {hash: "", url: "http://localhost:61659/"} 

$.mobile.navigate.history.stack[1]; 
// Object {url: "http://localhost:61659/Search/Filter", hash: "#/Search/Filter", title: "Search Result", transition: "pop", pageUrl: "/Search/Filter"…} 

और आप क्या चल रहा है देखने के लिए इस उपयोगिता फ़ंक्शन का उपयोग कर सकते हैं:

$(document).on('pagechange',function() { 
    console.log("Current:" + $.mobile.navigate.history.getActive().url); 
    console.log("Stack: (active index = " + $.mobile.navigate.history.activeIndex + " -previous index: " + $.mobile.navigate.history.previousIndex + ")"); 
    $.each($.mobile.navigate.history.stack, function (index, val) { 
     console.log(index + "-" + val.url); 
    }); 
}); 

यह भी देखना here

से क्वेरी स्ट्रिंग कतरने की पदावनत वर्तमान व्यवहार हैश। 1.5 से शुरू होने पर हम हैंश पर spec का पालन करेंगे और कस्टम नेविगेशन को संभालने के लिए एक हुक प्रदान करेंगे।

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