Chuyển tiếp trang jQuery và lịch sử trình duyệt

Tôi đang làm việc với jQuery để có hiệu ứng mờ dần trên trang html của tôi, hoạt động tốt. Tuy nhiên, khi tôi nhấn nút quay lại trong trình duyệt của mình, tôi truy cập url bên phải nhưng nhận được một trang trống. Đây có phải là thứ lưu trong bộ nhớ cache của trình duyệt không? Tôi tương đối mới với jQuery và tôi không thực sự chắc chắn làm thế nào để giải quyết điều này. Đây là trang web: http://www.e-preview.be/huyzewaterloos/nl/index.html Chuyển tiếp trang jQuery và lịch sử trình duyệt

Mã Tôi đang sử dụng là:

//page transition 
    $("body").css("display", "none"); 
    $("body").fadeIn(1500); 
    $("a.transition").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("body").fadeOut(500, redirectPage); 
    }); 

function redirectPage() { 
    window.location = linkLocation; 
}

Nguồn

2010-09-02 Rembrand

Đó là vì trang của bạn nằm trong "bfcache" (xem a Firefox article). Đối với disable bfcache, bạn chỉ có thể thêm một attribut onunload:

<body onunload="">

Nguồn: Ajax, back button and DOM updates và Is there a cross-browser onload event when clicking the back button?

Nguồn

2010-09-12 16:19:39

Có! Điều đó đã làm điều đó, cảm ơn bạn! – Rembrand

Trong hàm trên, biến linkLocation là không còn khả dụng do nó được ra khỏi phạm vi.

Hãy thử điều này thay vì:

$("body").css("display", "none"); 
$("body").fadeIn(1500); 
$("a.transition").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("body").fadeOut(500, function() { 
     window.location = linkLocation; 
    }); 
});

Edit: Vì vậy, tôi cố định mã của bạn, nhưng đó không phải là câu hỏi. :)

Rõ ràng, jQuery (tài liệu) .ready() không được kích hoạt khi bạn nhấn nút quay lại. Bạn có thể thử điều này ở gần đầu trang.

history.navigationMode = 'compatible';

Nguồn: Is there a cross-browser onload event when clicking the back button?

Nguồn

2010-09-02 15:21:27 Sandro

Vì vậy, nó được liên quan đến browserhistory/bộ nhớ đệm. Tôi sẽ thử nó khi tôi trở lại làm việc vào thứ hai. Cảm ơn! – Rembrand

Đã thử với mã đã sửa đổi nhưng Firefox 3.5 không làm việc đó. Ồ, nếu nó chỉ ở trong đó, tôi có thể sống với nó ngay bây giờ. Cảm ơn anyway, sẽ nhìn vào nó một số chi tiết. – Rembrand

Xin chào, có vẻ như bình luận ở trên có thể tốt hơn. http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button/201406#201406 – Sandro

Mới hơn các trình duyệt tốt hơn về việc giữ gìn các trang trước đã sẵn sàng để hiển thị khi bạn sử dụng nút back và về phía trước. Vì vậy, những gì có thể xảy ra là trình duyệt của bạn chỉ đơn thuần là hiển thị lại trang sau khi $("body").fadeOut(500, redirectPage); hoàn tất việc thực thi. Tức là, trang được hiển thị sau khi bạn nhấp vào nút quay lại có kiểu body { display: none; } được áp dụng.

Tôi không gặp sự cố khi điều hướng trang của bạn bằng Chrome "6.0.472.51 beta" bằng cách sử dụng các nút quay lại và tiến lên. Khi tôi sử dụng Firefox 3.5, tôi thấy vấn đề được mô tả khi sử dụng nút quay lại để quay lại trang chỉ mục. Sử dụng Firebug, tôi đã có thể xác nhận rằng phong cách của phần tử cơ thể đã được đặt thành display: none.

Vì vậy, những gì bạn thấy là FireFox's bfcache giữ trang ở trạng thái trước đó, JavaScript và tất cả. Nếu bạn muốn Firefox kích hoạt lại mã mờ của mình, bạn có thể đính kèm nó vào sự kiện pageshow của Firefox. Tương tự, WebKit có cơ chế page caching riêng của mình (điều này sẽ ảnh hưởng đến Safari và Chrome).

Cũng cần lưu ý rằng chức năng jQuery .ready() là không giống như chức năng window.load(). Xem documentation để biết thêm chi tiết. source code cho chức năng .ready() cũng khá hữu ích.

Để tóm tắt: Mã được thực thi bởi $.ready() được thực thi trước trang thực sự được hiển thị. Trong các trình duyệt mới hơn, khi bạn điều hướng khỏi một trang, rất có khả năng trình duyệt sẽ lưu trạng thái của trang đó chính xác như khi bạn rời khỏi trang đó. Do đó, khi bạn sử dụng nút quay lại của trình duyệt để quay lại trang, trang sẽ không được hiển thị lại. Đó là DOM sẽ không được xây dựng lại và chức năng $.ready() sẽ không được kích hoạt lại. Nếu bạn có mã cần chạy mỗi khi trang được hiển thị , hãy hiển thị rồi đính kèm mã vào phương thức pageshow() (nếu có).

Nguồn

2010-09-02 15:22:01

không phải vậy, bởi vì chức năng tải trọng cơ thể vẫn nên thực thi, và do đó các script js – Nealv

Điều đó tùy thuộc vào trình duyệt. Rõ ràng, Chrome 6 đang thực hiện lại sự kiện tải trọng cơ thể. Nhưng FireFox 3.5 thì không. http://www.thomasfrank.se/when_onload_fails.html –

Jeez, tôi thậm chí không biết có một sự khác biệt về trình duyệt khi nó bắn jQuery. Tốt để biết, cảm ơn. – Rembrand

Thông thường các trang được lưu trong bộ nhớ cache khi bạn nhấn nút quay lại, hàm $ (tài liệu) .ready() của bạn sẽ không kích hoạt.

Thử đặt không có bộ nhớ cache cho trang.

Nguồn

2010-09-02 15:32:35

Ah, do đó, điều này liên quan đến sollution Sandro sau đó. Cảm ơn – Rembrand

Hm, tôi đã thử với $ .ajaxSetup {cache: false}); nhưng dường như không có gì nhiều trong Firefox. – Rembrand

Có giải pháp cho trong Firefox, nhờ Gobygoba cho mã :) – Rembrand

Chuyển tiếp trang jQuery và lịch sử trình duyệt

Trả lời

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