2012-06-04 38 views
22

Tôi có Ứng dụng PhoneGap bằng jQuery Mobile. Tại một trang nhất định, tôi không thể để người dùng quay lại trang cuối cùng mà anh đã truy cập.Làm cách nào để xóa hoặc thay đổi lịch sử điều hướng của Jquery Mobile?

Các trang đặt hàng là như thế này:

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

Những gì tôi cần: Tôi muốn xóa tất cả lịch sử khi người dùng đang ở page 4 và thiết lập page 1 vì nó là người cuối cùng và chỉ truy cập trong trường hợp người dùng cố gắng quay lại. Có lẽ đó không phải là hoàn toàn có thể, sau đó tôi sẽ chấp nhận bất kỳ đề nghị.

Tôi tưởng tượng jQuery Mobile lưu trữ lịch sử điều hướng trong một số loại mảng và tôi hy vọng ai đó có thể giúp tìm thấy điều đó. Cảm ơn trước!

EDIT: Tôi đang sử dụng multi-page template, mà là một trang html duy nhất, nơi divs nhất định hoạt động như trang bằng jQuery Mobile quản lý.

Trả lời

29

Về cơ bản bạn có hai "chậu" lịch sử mà bạn cần phải giả mạo. Trình duyệt và JQM.

JQM urlHistory
Bạn có thể sửa đổi JQMs urlHistory rất dễ dàng. Từ mã 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); 
    } 
}; 

Vì vậy, tất cả các chức năng trên có sẵn và có thể được gọi như thế này ví dụ:

$.mobile.urlHistory.clearForward(); 

Theo dõi lịch sử của bạn, đặt một nơi nào đó và lắng nghe cho pageChange (một lần chuyển tiếp được thực hiện) để xem những gì là bên trong urlHistory:

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

Từ đó bạn có thể bắt đầu để xem những gì nên trong lịch sử và làm sạch nó lên như bạn cần.

Tôi đang sử dụng điều này rất nhiều cho lớp điều hướng của riêng mình để sửa đổi nội dung được lưu trữ trong urlHistory và những gì không được lưu trữ. Sync-ing với trình duyệt là phần khó khăn ...

On sync-ing với trình duyệt:
Trong lớp chuyển hướng của tôi Tôi chỉ loại bỏ các mục đôi từ urlHistory, vì vậy luôn luôn có một trang để đi đến (và không phải hai), khi bạn nhấp vào nút quay lại trình duyệt. Trong trường hợp của bạn, bạn sẽ có 4 mục trong lịch sử trình duyệt, nhưng nếu bạn xóa 2 mục nhập khỏi JQM urlHistory, bạn sẽ có hai trang "không cần phải" khi nút quay lại được nhấp.Vì vậy, nếu lịch sử trình duyệt của bạn trông như thế này:

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

Và remove page2 bạnpage3, nhấn back-button nên kết quả trong:

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] 

Một cách giải quyết lý thuyết sẽ là:

  1. giữ bộ đếm cách "sâu" bạn đi vào một trang
  2. xóa các trang khỏi địa chỉ JQM urlHistory và nhận giá trị "jump" = counter-removedPages
  3. trên nhấp chuột trình duyệt tiếp theo, nhảy x window.history (mặt sau) và chỉ cho phép chuyển đổi JQM. Bạn URL sẽ thư giãn page4> page3> page2> page1 trong một bước và bạn chỉ cho phép JQM để làm một sự chuyển tiếp duy nhất từ ​​page4 để page1
  4. kiểm tra những gì trong urlHistory và dọn dẹp sau "ba trở lại" của bạn

Hãy coi chừng đây là không phải là giải pháp tối ưu và bạn phải cân nhắc nhiều thứ (người dùng nhấp vào một nơi khác trước khi quay lại v.v.). Tôi đã cố gắng mãi mãi để có được một cái gì đó như thế này để làm việc trong một thiết lập phức tạp hơn và cuối cùng chỉ dừng lại bằng cách sử dụng nó, bởi vì nó không bao giờ làm việc như nó phải. Nhưng đối với một thiết lập đơn giản, nó có thể hoạt động rất tốt.

+11

Xin chúc mừng các vị thần cũ và mới! –

+0

Trong JSF, ví dụ, tôi đã sử dụng cách tiếp cận này để ghi đè lên nút bấm 'data-rel = "back" 'của jQuery Mobile:' window.history.go (- # {managedBean.count}); ', mà sẽ biến thành 'window.history.go (-3);' nếu bạn đang ở trang 4, chẳng hạn. – falsarella

+0

Tôi không tìm thấy $ .mobile.urlHistory trong tài liệu jqm ... http://api.jquerymobile.com/?s=urlHistory – dsdsdsdsd

3

jQuery Mobile sử dụng lịch sử trình duyệt để điều hướng trang đến trang, do đó ngăn người dùng quay lại không thực sự khả thi trong trình duyệt. Tuy nhiên, vì bạn có ứng dụng Phonegap, bạn có thể xử lý nút quay lại trực tiếp. Câu hỏi này sẽ giúp bạn: Override Android Backbutton behavior only works on the first page with PhoneGap

+0

Tôi đang sử dụng mẫu nhiều trang, chỉ sử dụng một tệp html. Tôi không nghĩ rằng nó sử dụng lịch sử trình duyệt, nhưng một lịch sử trình duyệt tự quản lý ajax. –

+0

Có, nó đang sử dụng history.pushState/thay đổi băm trên các trình duyệt không hỗ trợ pushState. Điều này vẫn tạo ra các mục trong lịch sử trình duyệt mà bạn không thể xóa (không thể từ javascript) - xem https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history. – OlliM

+0

Có thể tắt chức năng này từ jQM, nhưng điều đó có nghĩa là bạn mất một phần lớn chức năng với nó, mà bạn sẽ phải tự mình thực hiện. Chuyển đổi là ajaxEnabled: http: // jquerymobile.com/test/docs/api/globalconfig.html – OlliM

1

Đây là một câu trả lời đơn giản và vì vậy nên được thực hiện như vậy. Bạn có thể xóa các mục ra khỏi urlHistory.stack chỉ với

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

Nếu bạn muốn đảm bảo trang chính xác bị xóa, bạn có thể làm điều gì đó như thế này.

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

Chăm sóc để giải thích downvote? – jacobross85

13

Chỉ cần một FYI; trong JQM 1.4 rc1 không có urlHistory, nhưng bạn có thể đọc từ đối tượng điều hướng.

dụ:

$.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"…} 

và bạn có thể sử dụng chức năng tiện ích này để xem whats going on:

$(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); 
    }); 
}); 

cũng thấy here

Phản đối hành vi hiện tại của tước chuỗi truy vấn từ băm. Bắt đầu từ 1.5, chúng tôi sẽ theo dõi thông số về băm và cung cấp móc để xử lý điều hướng tùy chỉnh.

Các vấn đề liên quan