Đối tượng History trong JavaScript

Đối tượng History trong JavaScript là gì? Cú pháp như thế nào? Có những phương thức nào thể hiện? Mời bạn đọc cùng eLib.VN tham khảo bài viết dưới đây để tìm hiểu rõ về đối tượng History.

Đối tượng History trong JavaScript

1. Đối tượng history trong Javascript

Đối tượng history trong Javascript đại diện cho một loạt các URL được truy cập bởi người sử dụng. Bằng cách sử dụng đối tượng này, bạn có thể tải lại trang trước, trang sau hoặc bất kỳ trang cụ thể nào.

Đối tượng history là thuộc tính của đối tượng window, vì vậy nó có thể được truy cập bởi:

window.history

Hoặc:

history

2. Các thuộc tính của đối tượng history trong JavaScript

Chỉ có 1 thuộc tính của đối tượng history.

No. Thuộc tính Mô tả
1 length Trả về số lượng của URL lịch sử.

Cú Pháp:

history.length;

VD:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Toidicode.com demo history</title>
</head>
<body>
	<p>Click vào button để xem kết quả</p>
	<button type="button" onclick="getLenghth()">Click</button>
	<script type="text/javascript">
		function getLenghth() {
			alert(history.length);
		}		
	</script>	
</body>
</html>

3. Các phương thức của đối tượng history trong JavaScript

Chỉ có 3 phương thức của đối tượng history.

No. Thuộc tính Mô tả
1 forward() Tải lại trang tiếp theo.
2 back() Tải tại trang trước.
3 go() Tải lại trang cụ thể.

Ví dụ về phương thức back()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Toidicode.com demo history</title>
</head>
<body>
	<p>Click vào button để xem kết quả</p>
	<button type="button" onclick="getBack()">Click</button>
	<script type="text/javascript">
		function getBack() {
			history.back();
		}		
	</script>	
</body>
</html>

Ví dụ về phương thức get back()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Toidicode.com demo history</title>
</head>
<body>
	<p>Click vào button để xem kết quả</p>
	<button type="button" onclick="getBack()">Click</button>
	<script type="text/javascript">
		function getBack() {
			//quay về trang vừa load cách đây 2 lần
			history.go(-2);
		}		
	</script>	
</body>
</html>

Trên đây là bài viết của eLib.VN về Đối tượng History trong JavaScript. Đối tượng này rất ít khi được sử dụng trong Javascript nhưng nếu ứng dụng của bạn có chứa chức năng back, forward thì bạn cũng nên dùng đối tượng này. 

Ngày:05/11/2020 Chia sẻ bởi:Xuân Quỳnh

CÓ THỂ BẠN QUAN TÂM