Trình phát hiện nút bấm của trình duyệt JavaScript hoặc jQuery

Question

Ai đó có thể chia sẻ kinh nghiệm/mã cách chúng tôi có thể phát hiện nút bấm của trình duyệt trở lại (đối với bất kỳ loại trình duyệt nào)?

Chúng tôi cần phục vụ tất cả trình duyệt không hỗ trợ HTML5

Answer 1

Tính năng này có sẵn trong API lịch sử HTML5. Sự kiện này được gọi là 'popstate'

Answer 2

có rất nhiều cách để bạn có thể phát hiện nếu người dùng đã nhấp vào nút Quay lại. Nhưng mọi thứ phụ thuộc vào nhu cầu của bạn. Hãy thử khám phá các liên kết bên dưới, chúng sẽ giúp bạn.

Phát hiện nếu người dùng nhấn nút "Back" trên trang hiện tại:

• Is there a way using Jquery to detect the back button being pressed cross browsers
• detect back button click in browser

Phát hiện nếu trang hiện tại được truy cập sau khi nhấn nút "Back" trên trước đó ("Chuyển tiếp ") trang:

• Is there a cross-browser onload event when clicking the back button?
• trigger event on browser back button click

Answer 3

Sự kiện 'popstate' chỉ hoạt động khi bạn đẩy thứ gì đó trước đó. Vì vậy, bạn phải làm một cái gì đó như thế này:

jQuery(document).ready(function($) { 

    if (window.history && window.history.pushState) { 

    window.history.pushState('forward', null, './#forward'); 

    $(window).on('popstate', function() { 
     alert('Back button was pressed.'); 
    }); 

    } 
}); 

Đối với khả năng tương thích ngược trình duyệt Tôi khuyên bạn nên: history.js

Answer 4

Tìm thấy này để làm việc trình duyệt cũng chéo và điện thoại di động back_button_override.js.

(Thêm một bộ đếm thời gian cho safari 5,0)

// managage back button click (and backspace) 
var count = 0; // needed for safari 
window.onload = function() { 
    if (typeof history.pushState === "function") { 
     history.pushState("back", null, null);   
     window.onpopstate = function() { 
      history.pushState('back', null, null);    
      if(count == 1){window.location = 'your url';} 
     }; 
    } 
} 
setTimeout(function(){count = 1;},200); 

Answer 5

Vô hiệu hóa nút url bằng hàm sau

window.onload = function() { 
    if (typeof history.pushState === "function") { 
     history.pushState("jibberish", null, null); 
     window.onpopstate = function() { 
      history.pushState('newjibberish', null, null); 
      // Handle the back (or forward) buttons here 
      // Will NOT handle refresh, use onbeforeunload for this. 
     }; 
    } 
    else { 
     var ignoreHashChange = true; 
     window.onhashchange = function() { 
      if (!ignoreHashChange) { 
       ignoreHashChange = true; 
       window.location.hash = Math.random(); 
       // Detect and redirect change here 
       // Works in older FF and IE9 
       // * it does mess with your hash symbol (anchor?) pound sign 
       // delimiter on the end of the URL 
      } 
      else { 
       ignoreHashChange = false; 
      } 
     }; 
    } 
}; 

Answer 6

Trong trường hợp của tôi, tôi đang sử dụng jQuery .load() để cập nhật DIV trong một SPA (đơn trang [web] ứng dụng).

Làm quen với $(window).on('hashchange', ..) trình xử lý sự kiện, điều này tỏ ra khó khăn và mất một chút để hack. Nhờ đọc rất nhiều câu trả lời và thử các biến thể khác nhau, cuối cùng đã tìm ra cách làm cho nó hoạt động theo cách sau. Xa như tôi có thể nói, nó đang tìm kiếm ổn định cho đến nay.

Tóm lại - có biến số globalCurrentHash cần được đặt mỗi khi bạn tải chế độ xem.

Sau đó, khi $(window).on('hashchange', ..) nghe sự kiện chạy, nó sẽ kiểm tra như sau:

• Nếu location.hash có cùng giá trị, nó có nghĩa là Đi Forward
• Nếu location.hash có giá trị khác nhau, nó có nghĩa Going Back

Tôi nhận thấy bằng cách sử dụng var toàn cục s không phải là giải pháp thanh lịch nhất, nhưng làm mọi thứ OO trong JS có vẻ khó khăn với tôi cho đến nay. Gợi ý để cải thiện/tinh tế chắc chắn đánh giá cao

---

Thiết lập:

1. Xác định một var toàn cầu:

var globalCurrentHash = null; 

2. Khi gọi .load() tới cập nhật DIV, cập nhật var toàn cầu cũng như:

   function loadMenuSelection(hrefVal) { 
       $('#layout_main').load(nextView); 
       globalCurrentHash = hrefVal; 
   } 
   

3. Trên trang sẵn sàng, thiết lập người nghe để kiểm tra var toàn cầu để xem nếu Nút Quay lại đang được ép:

   $(document).ready(function(){ 
       $(window).on('hashchange', function(){ 
        console.log('location.hash: ' + location.hash); 
        console.log('globalCurrentHash: ' + globalCurrentHash); 
   
        if (location.hash == globalCurrentHash) { 
         console.log('Going fwd'); 
        } 
        else { 
   
         console.log('Going Back'); 
         loadMenuSelection(location.hash); 
        } 
       }); 
   
   }); 
   

Answer 7

Trong trường hợp HTML5, thao tác này sẽ thực hiện thủ thuật

window.onpopstate = function() { 
    alert("clicked back button"); 
}; history.pushState({}, '');