2012-02-21 37 views
12

đang sử dụng jquery mobile 1.0Jquery di động: chuyển hướng đến một trang khác trước khi tải

tôi muốn chuyển hướng từ first.html để otherPage.html mà không hiển thị nội dung của first.html

$("#pageId").live("pagebeforecreate", function(event) {     

    window.location.href = "otherPage.html";    

}); 

-i đã thử hầu hết mọi sự kiện nhưng không thành công. first.html được hiển thị trong giây lát.

Sau đó, tôi đã cố gắng với sự kiện 'pagebeforeload', nhưng nó isnt kích hoạt

$(document).bind("pagebeforeload", function(e, data){ 

     console.log("pagebeforeload starting"); // NO LOGGING HAPPENING 
     window.location.href = "otherPage.html"; 

     e.preventDefault(); 

     data.deferred.resolve(data.absUrl, data.options, response.page); 

}); 

$(document).bind("pageload", function(e, data){ 
    console.log("Page successfully loaded into DOM..."); // NO LOGGING HAPPENING 
}); 

-am không nhiều rõ ràng về sự kiện này & không tìm thấy một ví dụ hoàn toàn khả thi cho nó. -Có ai giúp plz được không!

+0

Bạn đã tìm thấy câu trả lời .. Tôi cần giải pháp .. THanks trước .. –

+0

Xin chào. Trên thực tế tôi đã làm điều đó gần 1 năm trước đây. Nhưng sẽ tìm kiếm và cho bạn biết. –

+0

Cảm ơn bạn .. xin vui lòng cho tôi biết nếu bạn tìm thấy nó .. Cảm ơn một lần nữa –

Trả lời

3

Sự kiện pagebeforeload chỉ được kích hoạt khi trang bên ngoài được nạp trong:

Bất cứ khi nào một trang bên ngoài được nạp vào ứng dụng DOM, 2 sự kiện được sa thải. Đầu tiên là pagebeforeload. Sự kiện thứ 2 sẽ là tải trang hoặc tải trang.

ý tưởng duy nhất của tôi để làm được việc này sẽ được nạp nội dung trang của first.html không đồng bộ, mà không phải là lý tưởng vì bạn sẽ chỉ làm cho 2 yêu cầu http cho cùng một trang. Tuy nhiên, điều này sẽ cho bạn khả năng chỉ gọi số first-contents.html nếu cần, nếu không bạn có thể chuyển hướng đến otherPage.html mà không hiển thị bất kỳ thông tin gì. ví dụ:

<script> 
    someCondition=true; 
    if(someCondition) { 
     window.location.href = "otherPage.html"; 
    } else { 
     $(document).ready(function() { 
      $('body').load('first-content.html', function() { 
       //other stuff after the contents have loaded: like the rest of your jquery relating to first.html 
      }); 
     }); 
    } 
</script> 

Hãy chắc chắn rằng thẻ nội dung là trống trong first.html trang.

+1

Tôi chỉ có thể nhận xét về câu trả lời của chính mình; nhưng tôi đã thử câu trả lời của @ Endophage trước khi đăng bài tuy nhiên nó vẫn hiển thị trang trước khi chuyển hướng trên thiết bị di động vì lý do nào đó, đặc biệt là lần tải đầu tiên (tức là không có bộ nhớ cache) và kích thước trang lớn hơn. –

+0

Thnx để trả lời. chỉ tôi muốn - một sự kiện, trong đó chuyển hướng sẽ kích hoạt và tải trang tiếp theo sẽ dừng lại. Khác, nó dễ dàng hơn để chỉ hiển thị/ẩn trang. –

1

Bạn đã thử chỉ đơn giản là không sử dụng sự kiện. Mã JS sẽ được thực thi khi nó gặp phải để đảm bảo mã điều kiện của bạn nằm ở đầu trang (ở đầu đâu đó) là đủ.

<html> 
<head> 
<script> 
    if (condition) 
    { 
    window.location.href = "otherPage.html"; 
    } 
</script> 
<!-- rest of page --> 
+0

thnx để trả lời.Nhưng nó không hoạt động, trang này lóe lên trước khi chuyển hướng: ( –

+0

@AvisekChakraborty Đó là điều tốt nhất bạn có thể hy vọng với JS vì vậy nếu nó không hoạt động, bạn có 2 lựa chọn. Hoặc chấp nhận rằng nó đủ tốt, hoặc tìm ra cách làm phía máy chủ chuyển hướng ... – Endophage

1

Thật khó để nói những gì bạn đang cố gắng hoàn thành. Giống như trạng thái Endophage, bạn có thể thực hiện chuyển hướng JavaScript đơn giản nếu tất cả những gì bạn muốn làm là chuyển đến một trang khác.

Tôi giả định rằng bạn muốn có thể chọn hiển thị nội dung của trang đầu tiên hoặc trang thứ hai nhưng vẫn ở trên trang đầu tiên.

Bạn có thể thêm mã sau đây. Đảm bảo bạn thêm nó trước bạn bao gồm jquery.mobile.

<script> 
    $(document).bind('mobileinit', function() { 
     // disable autoInitialize 
     $.mobile.autoInitializePage = false; 
    }); 
    $(function() { 
     var displaySecondPage = true; 
     if (displaySecondPage) { 
      // load page2.html and replace #page1 with contents of #page2 on page2.html 
      $('#page1').replaceWith($('<div />').load('page2.html #page2', function() { 
       // continue initialize 
       $.mobile.initializePage(); 
      })); 
     } 
     else { 
      // continue initialize 
      $.mobile.initializePage();     
     } 
    }); 
</script> 

Về cơ bản chúng tôi liên kết với mobileinit vì vậy chúng tôi có thể vô hiệu hóa autoInitialize. Điều này cho phép chúng tôi kiểm soát nhiều hơn thời điểm hiển thị trang đầu tiên.

Bây giờ chúng ta có thể sử dụng trình xử lý sẵn sàng chuẩn của jQuery để kiểm tra điều kiện của chúng tôi và nếu đúng, hãy tải nội dung của page2.html và thay thế trang #page1. Lưu ý rằng tôi đang sử dụng phương thức $.load với cú pháp phân đoạn trang. Điều này có nghĩa là bạn phải biết id trang bạn muốn tải.

Khi trang được tải, bạn có thể gọi $.mobile.initializePage để cho phép thiết bị di động jquery hiển thị trang mới.

Để ngăn chặn các nội dung của trang đầu tiên để hiển thị trong tải này, tôi thêm CSS sau đây trong stylesheet của tôi:

div[data-role='page'] { 
    display: none; 
} 

jQuery Mobile sẽ chăm sóc của hiển thị và ẩn trang, vì vậy làm cho chúng tất cả ẩn bởi mặc định sẽ đảm bảo bạn không nhận được flash của nội dung không được nâng cấp.

Dù sao, hy vọng điều này sẽ hữu ích.

1

Hãy thử sử dụng này:

<head> 
    <script> 
     window.location.replace('otherPage.html'); 
    </script> 
</head> 
11


Hãy thử này Một

$("#firstPageId").live("pagecreate",function(){ 
     $.mobile.changePage("otherPage.html"); 
}); 

Ngoài ra, Bạn có thể sử dụng loadPage

Hy vọng nó sẽ giúp :)

+0

Cảm ơn bạn rất nhiều – Dibish

0

tôi biết đây là cũ, nhưng tôi dành thời gian để giải quyết điều đó, vì vậy điều này có thể hữu ích cho ai đó.

Bây giờ, với điện thoại di động jquery 1.3, bạn có thể chỉ cần đặt url dữ liệu thành <div data-role="page" data-url="..."> trên trang đích. JQM sẽ phát hiện và cập nhật url tương ứng.

Xem thêm ở đây http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html

Và thậm chí một số bản demo đây http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html

0

Kể từ khi nó có vẻ như có những câu trả lời rất để này; đặc biệt là khi bạn đang sử dụng một mẫu đa-page .. đây là một liên kết đến một câu trả lời về các hình thức di động jquery mà không làm việc bằng cách tiêm cáC# thẻ vào url trước khi trang init

jquery forum answer

Không làm việc trong trường hợp của tôi vì tôi không muốn người dùng xem thẻ băm nhưng đó là một sự khởi đầu .. nhiều hơn nữa để đến sau

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