Đôi khi, bạn có thể muốn ngăn người dùng đóng tab hoặc cửa sổ trình duyệt của họ để hoàn thành tác vụ hiện tại. Ví dụ: bạn có thể muốn ngăn người dùng đóng tab/trình duyệt sau khi họ đã thanh toán để bạn có thể hướng họ đến một trang khác. Trong bài viết này, chúng ta sẽ tìm hiểu cách phát hiện việc đóng tab/trình duyệt trong JavaScript

Cách phát hiện Đóng tab/Trình duyệt trong JavaScript

Bạn có thể phát hiện sự kiện đóng tab/trình duyệt trước khi tải tự động được kích hoạt khi người dùng cố gắng đóng tab/trình duyệt. Sự kiện này được gọi ngay trước khi đóng cửa sổ, khi nó vẫn hiển thị và điều hướng có thể bị hủy

Chúng tôi sẽ thêm một trình xử lý sự kiện cho sự kiện này. Bạn có thể hiển thị hộp xác nhận hoặc thông báo cảnh báo khi sự kiện này được kích hoạt. Nó sẽ cho phép người dùng hủy đóng tab/cửa sổ. Khi xác nhận, người dùng sẽ được đưa đến trang mới, nếu không thì điều hướng sẽ bị hủy

Đây là một mã JavaScript đơn giản cho cùng một

window.addEventListener['beforeunload', function [e] {
    e.preventDefault[];
    e.returnValue = '';
}];

Giả sử bạn có trang HTML sau

	
		How to detect browser or tab closing
	



	

		Hello World
	
	
	Detect browser or tab closing
	
		
	
	
	
		window.addEventListener['beforeunload', function [e] {
			e.preventDefault[];
			e.returnValue = '';
		}];
	


					

Trình xử lý sự kiện được xác định ở trên được kích hoạt khi thậm chí beforeunload được kích hoạt. Chúng tôi sử dụng hàm preventDefault[] để ngăn đóng tab/cửa sổ. Sau đó, bạn có thể chọn hiển thị thông báo cảnh báo hoặc hộp xác nhận theo yêu cầu của mình và tiếp tục dựa trên đầu vào của người dùng

Trong bài viết này, chúng tôi đã chỉ ra cách bạn có thể ngăn đóng tab/cửa sổ nhưng chỉ sử dụng nó khi bạn phải làm như vậy, chẳng hạn như ngăn người dùng rời khỏi trang web của bạn sau khi họ thanh toán, cho đến khi thanh toán hoàn tất & được xác nhận trên trang web của bạn. Ngăn người dùng đóng tab/cửa sổ mà không có lý do chính đáng là một cách làm không tốt và phải tránh nếu có thể

Trong HTML, thẻ neo được sử dụng để mở các URL trong tab mới một cách cơ bản và đơn giản. Thông tin thêm về thẻ này có thể được tìm hiểu từ bài viết này. Tuy nhiên, đôi khi cần phải làm điều tương tự bằng Javascript. Trong trường hợp này cửa sổ. phương thức open[] tỏ ra hữu ích. Cửa sổ. open[] được sử dụng để mở một cửa sổ trình duyệt mới hoặc một tab mới tùy thuộc vào cài đặt trình duyệt và các giá trị tham số

Tiếp cận.  

• Để mở một tab mới, chúng ta phải sử dụng _blank trong tham số thứ hai của cửa sổ. phương thức mở []
• Giá trị trả về của cửa sổ. open[] là tham chiếu đến cửa sổ hoặc tab mới được tạo hoặc null nếu không thành công
• Không thêm tham số thứ ba vào nó vì nó sẽ dẫn đến việc mở một cửa sổ mới thay vì tab

cú pháp

window.open[URL, '_blank'];

ví dụ 1

HTML

_______3____4____5

	
		How to detect browser or tab closing
	



	

		Hello World
	
	
	Detect browser or tab closing
	
		
	
	
	
		window.addEventListener['beforeunload', function [e] {
			e.preventDefault[];
			e.returnValue = '';
		}];